Question

我想要从左到右，从右到左（反之亦然）为元素的背景位置设置动画，并不断重复它。我完成了这个，但是以错误的方式。

代码很乱

元素的背景位置会在一段时间后停止制作动画。

window.setInterval(function(){
    if($(element).css("background-position") == posRight + "px 50%"){
        move("left");
    } else if($(element).css("background-position") == posLeft + "px 50%"){
        move("right");
    }
}, 500);

我很确定问题是setInterval，但我不知道我可以使用什么。如果我不使用间隔，则不会检查if语句（或只检查一次）。如果我减少间隔时间，它就不会起作用，因为if语句检查位置是否在X，但是位置从X开始，所以它什么都不做。

我在哪里谈论？ 小提琴：http://jsfiddle.net/8eS3a/1/

我想要什么？ setInterval的解决方法。

您可以将渐变更改为背景图像，以查看正在发生的事情。我使用渐变，因为有时图像会被删除。

Answer 1

使用animate()内置的回调，如下所示：

function changePos(element, posLeft, posRight, duration) {
    var state = $(element).data('state'),
        pos   = state ? posRight : posLeft;

    $(element).animate({backgroundPosition: pos}, duration, function () {
        changePos(element, posLeft, posRight, duration);
    }).data('state', !state);
}

changePos("#elem1", 0, 40, 300);
changePos("#elem2", 0, 40, 600);

FIDDLE

jQuery背景位置从左到右，从右到左

1 个答案: