javascript - 使用 javascript/jquery 伪造 Gif

Question

我有一个基于 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。

关于我做错了什么/如何改进这一点的任何建议？

Answer 1

尝试这个 -

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

Answer 2

不确定在循环内运行间隔是一个好主意，但我猜问题是间隔函数内的范围：

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

Answer 3

this您的setInterval闭包中有不正确的引用。请参阅 JavaScript Garden 中的“工作原理”this。

在您的情况下，您应该将引用保存this在变量中：

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

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

或者，最好使用传递给 的第一个参数，在这种情况下each等于。$(this)

Answer 4

我真的很感谢所有的帮助，我似乎已经弄清楚了动画部分：

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

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

通过隐藏第一个 div 并将其从包含的 div 中删除，然后将其附加回包含的 div，并显示新的第一个 div，它的动画效果非常好！