Question

我在jquery中编写了一些代码来循环遍历div中的一些图像，淡入每个图像，然后向上滑动该图像（我有一个包含div，其中div溢出隐藏，其高度小于图像） - 然后淡入下一个图像，向上滑动，重复 - 但是我需要重置幻灯片，以便在下一个循环中通过图像不会“卡在”顶部。

关于衰落和FIRST幻灯片（margin-top：-108px;）的一切都很好 - 但是，当我尝试将margin-top重置为0px以进行下一次迭代时，它不会重置它，并且在下一次迭代中，图像仍处于-108px位置。

请原谅我的Jquery代码，如果有noob错误，我是新手！

这是我的代码：

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

您应该重置动画的complete回调的边距，否则动画本身将覆盖您设置的margin-top，请执行以下操作：

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

Answer 2

如果您喜欢非常短的代码，请试用plugin jquery-timing。它为动画的连接提供了紧凑的链接语法。它甚至有内联循环。

使用该插件，整个代码归结为单个jQuery链：

$('#slider > a > img').hide().repeat().each($).css({marginTop:0})
    .fadeIn(500).animate({marginTop:-108},6000,$).fadeOut(300);

Jquery淡入，向下滑动，下一个图像，重置幻灯片

2 个答案: