Question

I wrote some code in jquery to loop through some images inside a div, fade in to each image and then slide that image up (i have a wrapping div that has div overflow hidden which height is smaller than the image) – then fade to next image, slide up, repeat – however I need to reset the slide so that on the next loop through the image isn’t “stuck” at the top.

Everything works great in regards to fading and the FIRST slide (margin-top:-108px;) – however, when i try to reset the margin-top to 0px for the next iteration it doesn’t reset it, and on the next iteration the image is still at the -108px position.

Please excuse my Jquery code, if there are noob mistakes, i’m pretty new to it!

Here is my code:

CSS

        <style type="text/css" media="screen">
        #slider { height:296px; overflow:hidden; width:822px; position:absolute; left:50%; margin-left:-411px; top:87px; z-index:20; }
        #slider-back { position:absolute; left:50%; margin-left:-411px; height:296px; z-index:29; top:87px; width:822px; background: url("/test/backimage.png") no-repeat scroll 0px 0px transparent; }
    </style>

HTML

    <div id="slider">
        <a href="#"><img src="images/banner/Image1.jpg" id="image1" /></a>
        <a href="#"><img src="images/banner/Image2.jpg" id="image2" /></a>
        <a href="#"><img src="images/banner/Image3.jpg" id="image3" /></a>
    </div>
    <div id="slider-back"></div>

JQUERY

        <script type="text/javascript">

        $(document).ready(function() { 

            var imgs = $('#slider > a > img'); var z = 1; var previousImageId = "";

            $(imgs[0]).show();

            function loop(ev) {
                    imgs.delay(5000).fadeOut(300).eq(z).fadeIn(500, function() {

                    $(this).animate({marginTop:'-108px'}, {queue: false, duration:6000});

                    $(this).css("margin-top","0px");

                    check = z != imgs.length-1 ? z++ : z=0;

                    loop();      
                });
            }
            loop();
        });

    </script>

Answer 1

You should reset the margin on the complete callback of the animation, otherwise the animation itself will override the margin-top you set, so do as follows:

$(this).animate({marginTop:'-108px'}, {queue: false, duration:6000, complete: function(){
    $(this).css("margin-top","0px");
}});