当使用变量引用数组的索引时，不能改变Jquery中的css

Can't change css in Jquery when using a variable to reference an index of an array

本文关键字：不能 能改变 Jquery css 中的 索引 变量 引用 数组      更新时间：2023-09-26
var bubble = [$('#bubble1'), $('#bubble2'), $('#bubble3'), $('#bubble4'), $('#bubble5'), $('#bubble6')];
var bubbleFirst = 0;
var visibleBubbles = 3;
var bubbleHeight = 200;
var bubbleTimeDelay = 5000;
var bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay/2);
function animateBubbles(){
    clearTimeout(bubbleTimer);//stop from looping before this is finished
    for(var i = 0; i < visibleBubbles + 1; i++){
        count = i + bubbleFirst;
        if ( count >= bubble.length ) count = count - bubble.length;//keep index inside array
        bubble[count].animate({top:'-=' + bubbleHeight}, 2000);
    }
    bubble[bubbleFirst].css('top', '600px');//put elements moving off top to bottom
    //resetBubbles();
    bubbleFirst++;
    if(bubbleFirst >= bubble.length) bubbleFirst = 0;//bubbles have looped
    bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay);//start looping again
}
  • bubble1从top: 0px;开始
  • bubble2从top: 200px;开始
  • bubble3从top: 400px;开始
  • bubble4-6 start with top: 600px;
  • 都是position: absolute在一个包装div

为代码转储道歉。我的问题都集中在第16行:

bubble[bubbleFirst].css('top', '600px');

这段代码似乎从未执行过，在我的控制台中没有错误，我已经验证了bubble[bubbleFirst]正在使用console.log返回正确的元素。(这是div)

我目前正在使用一个解决方案，但它不是动态的:

function resetBubbles(){
    /*bubble[bubbleFirst].css('top', '600px');//put elements moving off top to bottom*/
    if(bubble[0].css('top') == '-200px') bubble[0].css('top', '600px');
    if(bubble[1].css('top') == '-200px') bubble[1].css('top', '600px');
    if(bubble[2].css('top') == '-200px') bubble[2].css('top', '600px');
    if(bubble[3].css('top') == '-200px') bubble[3].css('top', '600px');
    if(bubble[4].css('top') == '-200px') bubble[4].css('top', '600px');
    if(bubble[5].css('top') == '-200px') bubble[5].css('top', '600px');
}

我不知道为什么这不起作用，这可能是我的逻辑错误。但我怎么也找不到。任何帮助都会很感激。感谢您的宝贵时间。

是否有可能调用动画冲突与您自定义设置的顶部属性?ie。你设置了它，但是top马上又被animate修改了。你可以向animate传递一个回调函数，它将在动画完成时运行。这时你应该重置你的气泡位置。

function animate_bubble(index) {
    bubble[index].animate({ top: "0px" }, 2000 /* 2 seconds */, function () {
        bubble[index].css({ top: "600px" });
        animate_bubble(index);
    }
}
animate_bubble(0);
animate_bubble(1);
// etc .. probably do this in a for-loop

你需要找到一些方法来取消动画，但不应该太难。

问题是bubbleFirst在动画完成之前就递增了。我将函数改为如下:

function animateBubbles(){
    clearTimeout(bubbleTimer);//stop from looping before this is finished
    for(var i = 0; i < visibleBubbles + 1; i++){
        count = i + bubbleFirst;
        if ( count >= bubble.length ) count = count - bubble.length;//keep index inside array
        if (count == bubbleFirst) 
        {
            bubble[count].animate({top:'-=' + bubbleHeight, opacity: 0}, bubbleAnimationSpeed, function(){
                bubble[bubbleFirst].css('top', displayHeight+'px');
                bubble[bubbleFirst].css('opacity', '1'); 
            });
        }
        else if(i == visibleBubbles)
        {
            bubble[count].animate({top:'-=' + bubbleHeight}, bubbleAnimationSpeed, function(){
                bubbleFirst++;
                if(bubbleFirst >= bubble.length) bubbleFirst = 0;//bubbles have looped
                bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay);/*start looping again*/
            });
        }
        else bubble[count].animate({top:'-=' + bubbleHeight}, bubbleAnimationSpeed);
    }       
}

谢谢你的输入!

相关文章：