0

我想将元素的背景位置从左到右、从右到左（反之亦然）设置动画并不断重复。我做到了这一点，但以错误的方式。

  1. 代码很乱

  2. 元素的背景位置确实会在一段时间后停止动画。

    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 的解决方法。

您可以将渐变更改为背景图像以查看发生了什么。我使用了渐变，因为有时图像会被删除。

4

1 回答 1

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);

小提琴

于 2013-07-27T11:34:57.533 回答