-2

このコードのチャンクを改善して、各画像が個別に表示され、フェードアウトするようにしたいと考えています。

これは問題に直面しており、これは迅速に繰り返されるため、最後の画像のみが表示され、フェードアウトします。

jQuery.each(
slidesArray, function (index, value) {

   var linkHref = value[1];
   var imageSource = value[0];;


   $("#slider").html("<a href='" + linkHref + "'><img src='" +
                     imageSource + "'></a>").fadeOut(5000);

});

手伝って頂けますか ？画像はそれぞれアニメーション化する必要があることに注意してください。

4

3 に答える 3

0

ここに役立つ小さなjQueryプラグインがあります：

jQuery.slowEach = function( array, interval, callback ) {
    if( ! array.length ) return;
    var i = 0;
    next();
    function next() {
        if( callback.call( array[i], i, array[i] ) !== false )
            if( ++i < array.length )
                setTimeout( next, interval );
    }
};
jQuery.fn.slowEach = function( interval, callback ) {
    jQuery.slowEach( this, interval, callback );
};

上記のプラグインを含めます。slowEachメソッドと関数を追加します: $(...).slowEach(interval,callback)and $.slowEach(interval,delay,callback). オブジェクトまたは jQuery の選択を反復処理し、delay反復ごとにミリ秒待機します。
上記のコードを編集して使用しますslowEach。

jQuery.slowEach(
slidesArray, 5000, function (index, value) {
  var linkHref = value[1];
  var imageSource = value[0];
   $("#slider").html("<a href='" + linkHref + "'><img src='" + imageSource + "'></a>").fadeOut(5000);
});
于 2012-08-21T11:19:29.440 に答える
0

私はこれをテストしていませんが、理論的には動作するはずです

function fader(i){
    $("#slider").css('display', '');
    if (i == slidesArray.length){
        return;
    }
    var linkHref = slidesArray[i][1];
    var imageSource = slidesArray[i][0];
    i++;
    $("#slider").html("<a href='" + linkHref + "'><img src='" +
                      imageSource + "'></a>").fadeOut(5000, fader(i));
}
fader(0);

編集：私はそれをテストしましたが、うまくいっているようです。これは同様の使用デモです

使用する必要がないことに注意してくださいsetTimeout

于 2012-08-21T11:27:07.560 に答える
-1

$("#slider").html() を呼び出すたびに、#slider の内容を置き換えます。

あなたがしたいのは、実際のループを遅らせることではなく、画像の配置[およびフェード]を遅らせたいということです。setTimeout を使用して、次のように行うことができます。

jQuery.each ( slidesArray,function(index,value) {

        var linkHref = value[1];
        var imageSource = value[0];;

        setTimeout(function() {
             $("#slider").html
             (
                "<a href='" + linkHref + "'><img src='"+ imageSource + "'></a>"
             ).fadeOut(5000);
        }, 2000 * index);
    }
);
于 2012-08-21T11:19:08.613 に答える