0

私は JQuery を初めて使用し、ループとアニメーションについて少し読んだことがあります。私が考えているのは、 と のそれぞれ<li>の内部をフェードインおよびフェードアウトさせてから、次のページに移動すること<li>です。

フェードインとフェードアウトをなんとか機能させましたが、最後に到達すると停止します。最後に到達したら、もう一度開始するための最良の方法は何ですか?

JQuery:

<script>
$(document).ready(function(){

$('.fader > li').hide();

var duration = 1000;

$('.fader > li').each(function(i){ $(this).delay( i * (duration * 2) ).fadeIn(duration).fadeOut(duration); } );


});
</script>

HTML

<ul class="fader">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
4

4 に答える 4

2

これを正しく行う代わりに、アニメーションが終了したときに呼び出される/delayに渡すことができるオプションのコールバックを使用する方がはるかに簡単です。fadeInfadeOut

次に、これをすてきでシンプルなプラグインにまとめることができます。

(function($){
    $.fn.cycle = function(options){
       var settings = $.extend({duration:1000},options) ;

       this.children().hide();
       doSequence(this.children(),0);        

       function doSequence ($elems, i){
           var next = (i == $elems.length-1) ? 0 : i+1;
           fadeInThenOut($elems.eq(i),function(){ doSequence($elems, next) });;       
       }
       function fadeInThenOut ($elem,callback){
           $elem.fadeIn(settings.duration,function(){
               $elem.fadeOut(settings.duration,callback);
            });
       }           
    };


})(jQuery);

使用方法は非常に簡単になります。

$('.fader').cycle({duration:1000});

実際の例: http://jsfiddle.net/VZJTL/

于 2012-05-21T10:23:48.347 に答える
1 
var len = $('.fader > li').hide().length;
var duration = 1000;

function animate(i) {
    $('.fader > li:eq(' + i++ +')').fadeIn(duration).fadeOut(duration, function() {
        animate(i == len ? 0 : i);
    });
}

animate(0);​

デモ: http://jsfiddle.net/mW9xf/

于 2012-05-21T10:11:49.297 に答える
1 
<script>
$(document).ready(function(){

$('.fader > li').hide();

var duration = 1000;
var t;

fade();

function fade()
{
    $('.fader > li').each(function(i){ 
        $(this).delay( i * (duration * 2) )
            .fadeIn(duration)
            .fadeOut(duration); 
    } );
    t = setTimeout(fade, 2000);

}

});
</script>
于 2012-05-21T10:06:40.367 に答える
0

以下は、遅延の問題（一度に複数のアイテムが表示される）なしで、必要なことを行う必要があります。

$(document).ready(function() {

    $('.fader > li').hide();
    fade();

    function fade() {
        var duration = 1000;
        $('.fader > li').each(function(i) {
            $(this).delay(i * (duration * 2)).fadeIn(duration).fadeOut(duration, function() {
                if ((i + 1) == $('.fader > li').length) {
                    fade();
                }
            });
        });

    }

});​

例

于 2012-05-21T10:33:18.930 に答える