jquery - Jquery：摇摆标志

Question

我目前正在为一个老派 c64 小组制作一个网站，我认为展示像旧介绍那样左右摆动的徽标会很好。

我以为我有它，但它向一个方向摆动，然后回来然后停止。

这是代码：

jQuery(document).ready(function() {
function right() {
    $('header img').animate({
    left: '680px',
    }, 5000, function() {
    left()
    });
}
function left() {
    $('header img').animate({
    left: '0px',
    }, 5000, function() {
    right()
    });
}
});

我确定我缺少一些简单的东西，任何帮助将不胜感激。

Answer 1

看起来这可能是范围的问题。尝试在就绪事件处理程序之外定义函数，如下所示：

function right() {
    $('header img').animate({
    left: '680px',
    }, 5000, function() {
        left();
    });
}

function left() {
    $('header img').animate({
    left: '0px',
    }, 5000, function() {
        right();
    });
}

jQuery(document).ready(function() {
    right();
});

Answer 2

我认为这与动画队列有关。我将 stop() 添加到 t 动画中，现在它可以工作了。因此，如果您想在页面上使用摆动徽标，请使用以下代码：

jQuery(document).ready(function() {
right();

    function right() {
        $('#images img').stop().animate({
// Move the image right to the width of the container, minus the width of the image
        left: '480px',
        }, 5000, function() {
        left()
        });
    }
    function left() {
        $('#images img').stop().animate({
// Move back to the left
        left: '0px',
        }, 5000, function() {
        right()
        });
    }

});