javascript - JQuery animating batch of images -

javascript - JQuery animating batch of images -

hi ive been trying quite simple animation on webpage somehow cannot accomplish desired result.

here page http://sisphoto.eu/actions.php. i`m trying create each image appear @ resulting position , create them animate 1 @ time, not @ once.

here code:

html

<div class="left"> <span class="name"> <a href="index.php"><img class="menu" src="name.png"/></a> </span> <span class="img"> <img src="actions/p30.jpg" onclick="click(this)"/> </span> </div> <div class="middle"> <span class="img"> <img src="actions/p1.jpg" onclick="click(this)"/> </span> <span class="img"> <img src="actions/p4.jpg" onclick="click(this)"/> </span> </div> <div class="right"> <span class="img"> <img src="actions/p5.jpg" onclick="click(this)"/> </span> <span class="img"> <img src="actions/p6.jpg" onclick="click(this)"/> </span> </div>

css

.left, .middle, .right{ /*max-width: 35%;*/ min-width: 30%; position: relative; float: left; top: 2.5em; margin-right: 2px; margin-bottom: 35px; } .left{ left: 0; } .middle{ left: 300; } .right{ left: 600; } .img { position: relative; opacity: 0; margin: auto; max-width: 0; -webkit-transition: 1.5s ease-out; -moz-transition: 1.5s ease-out; -ms-transition: 1.5s ease-out; -o-transition: 1.5s ease-out; transition: 1.5s ease-out; margin-top: -0.5em; }

js

jquery.fn.reverse = [].reverse; $(function () { var delay = 300; $('.right, .middle, .left').each(function () { var imgs = $('.img'), ilen = imgs.length; imgs.each(function () { var c = $(this), h = c.height(); delay += 10; settimeout(function () { c.css('max-width', '100%'); c.css('opacity', '1'); }, delay); }); }); });

any help?

you can loop on images , animate images delay. delay animationspeed * count

of current image.

class="snippet-code-js lang-js prettyprint-override">var animationspeed = 300; var count = 0; $('.animate_image').shuffle().each( function() { $(this).delay(animationspeed * count).animate({ }, animationspeed); count+=1; }); (function($){ $.fn.shuffle = function() { var allelems = this.get(), getrandom = function(max) { homecoming math.floor(math.random() * max); }, shuffled = $.map(allelems, function(){ var random = getrandom(allelems.length), randel = $(allelems[random]).clone(true)[0]; allelems.splice(random, 1); homecoming randel; }); this.each(function(i){ $(this).replacewith($(shuffled[i])); }); homecoming $(shuffled); }; })(jquery); class="snippet-code-css lang-css prettyprint-override">.animate_image { opacity: 0.0; }

edit: instead of 'img' selector utilize class selector '.animate_image'. add together class image this:

javascript jquery html css jquery-animate