0

div内のいくつかの画像をループし、各画像にフェードインしてからその画像を上にスライドするjqueryでいくつかのコードを書きました（高さが画像よりも小さいdivオーバーフローが隠されているラッピングdivがあります）-次にフェードします画像、スライドアップ、繰り返し-ただし、次のループで画像が上部に「スタック」しないように、スライドをリセットする必要があります。

フェードと最初のスライド (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>

Jクエリ

        <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>
4

2 に答える 2

1

非常に短いコードが好きな場合は、プラグイン jquery-timingを試してください。アニメーションを連結するためのコンパクトな連鎖構文を提供します。インラインループさえあります。

そのプラグインを使用すると、コード全体が 1 つの jQuery チェーンに要約されます。

$('#slider > a > img').hide().repeat().each($).css({marginTop:0})
    .fadeIn(500).animate({marginTop:-108},6000,$).fadeOut(300);
于 2012-10-25T07:50:38.843 に答える
1

アニメーションのコールバックでマージンをリセットする必要がありcompleteます。そうしないと、設定したマージントップがアニメーション自体によって上書きされるため、次のようにします。

$(this).animate({marginTop:'-108px'}, {queue: false, duration:6000, complete: function(){
    $(this).css("margin-top","0px");
}});
于 2012-10-24T22:48:23.133 に答える