1

こんにちは、setTimeout の後に呼び出される関数があります。関数は次のとおりです。

function slideuptwitter(){

    for (var i = 0, limit = 10; i < limit; i++) {
            $('.twitter-article').first().addClass('fade');
            $('.fade').delay( 2000 ).slideUp(5000);
            //$('.fade').appendTo('#twitter-feed');

            //$('.fade').delay( 5000 ).removeClass('fade');

            }

    }

これが私のレイアウトです

<div id="twitter-feed">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
<div class="twitter-article">
</div>

最初の Twitter 記事を取得して、クラス フェードを追加し、2 秒後に上にスライドさせたいと思います。

この後、フェード クラスを一番下に移動し、クラスを削除して、クラスを次の twitter 記事に再適用します。

基本的に 10 個すべてをループする

コメントアウトされたコードは、私のために働いている部分です

助けてくれてありがとう

4

1 に答える 1

1

非同期再帰を使用: http://jsfiddle.net/7TQCr/2/

function fadeOut(elements, callback)
{
    if (elements.length){
        elements.eq(0).addClass('fade');
        elements.eq(0).delay( 2000 ).slideUp(1000, function(){
            elements.eq(0).removeClass('fade');
            fadeOut(elements.slice(1), callback);
        });
    }
    else {
        callback();
    }
}
$(function(){
    fadeOut($('#twitter-feed div'), function(){
        alert("done");
    });
});

特定のフェードとクラスの要件を満たすように更新されました。

無限フェードアウト/フェードイン バージョンhttp://jsfiddle.net/7TQCr/4/ :

function fadeOut(elements, callback)
{
    if (elements.length){
        elements.eq(0).addClass('fade');
        elements.eq(0).delay( 2000 ).slideUp(1000, function(){
            elements.eq(0).removeClass('fade');
            fadeOut(elements.slice(1), callback);
        });
    }
    else {
        callback();
    }
}
function fadeIn(elements, callback)
{
    if (elements.length){
        elements.eq(0).addClass('fade');
        elements.eq(0).delay( 2000 ).slideDown(1000, function(){
            elements.eq(0).removeClass('fade');
            fadeIn(elements.slice(1), callback);
        });
    }
    else {
        callback();
    }
}
function infinite(){
    fadeOut($('#twitter-feed div'), function(){ 
        fadeIn($('#twitter-feed div'), function(){
            infinite();
        });
    });
}
$(function(){
    infinite();
});
于 2013-08-09T15:13:47.483 に答える