Question

我有一个隐藏并在页面上基于pageY位置显示div的函数，但是我还需要能够让它自动隐藏并按顺序显示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中的“How this works”。

在您的情况下，您应该将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，它可以非常好地动画！

用javascript / jquery假装Gif

4 个答案: