0

pageYの位置に基づいてスクロール時にdivを非表示および表示する機能がありますが、divを順番に自動的に非表示および表示する機能も必要です(子を持つもののみ)。偽のアニメーションGifのように、永遠にループします.

私はこれを試しました：

function autoPlay() {
  $('.conP').each(function(){
    if ($(this).children().length > 0) {
      setInterval(function(){
        $(this).show().delay('100').hide();
      },300);
    }
  });
}

これはエラーを返しませんが、class="conP" で div を隠したり表示したりしていません。

私が間違っていること/これを改善する方法について何か提案はありますか?

4

4 に答える 4

1

これを試して -

function autoPlay() {
  $('.conP').each(function(){
    if ($(this).children().length > 0) {
      var $that = $(this);
      setInterval(function(){
        $that.show().delay('100').hide();
      },300);
    }
  });
}
于 2013-06-12T22:05:35.900 に答える
1

ループ内で間隔を実行するのが良いアイデアかどうかはわかりませんが、問題は間隔関数内のスコープであると推測しています:

function autoPlay() {
    $('.conP').each(function(i, elem){
        if ( $(elem).children().length ) {
            setInterval(function(){
                $(elem).show().delay(100).hide();
            },300);
        }
    });
}
于 2013-06-12T22:05:57.603 に答える
1

クロージャーに間違った参照がthisあります。JavaScript Garden の「仕組みsetInterval」を参照してください。this

あなたの場合、参照をthis変数に保存する必要があります：

$('.conP').each(function() {
    var $element = $(this);

    setInterval(function () {
        $(element).show().delay('100').hide();
    }, 300);
});

または、 に渡される最初の引数(この場合eachは と等しい) を使用することをお勧めします。$(this)

于 2013-06-12T22:08:49.280 に答える
0

私はすべてのヘルプの人たちに本当に感謝しています.私はアニメーションの部分を理解しているようです:

setInterval( function() {
    autoPlay();
},120);

function autoPlay() {
    var backImg = $('#outterLax div:first');
    backImg.hide();
    backImg.remove();
    $('#outterLax').append(backImg);
    backImg.show();
}

最初の div を非表示にし、それを削除してから、含まれている div に追加し直し、新しい最初の div を表示すると、非常にうまくアニメーション化されます。

于 2013-06-12T23:50:23.337 に答える