Question

我正试图通过在循环中移动图像的css'background-position'来创建加载图标：

$('#LoginButton').click(function () {

    var i = 1, h = 0, top;

    for (i = 0; i <= 12; i++) {
        h = i * 40;
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top).delay(800);
    }

});

这里的问题是它跑得快，所以我没有看到移动背景的“动画”。所以我添加了jquerys delay（），但是：

delay（800）无效，因为delay（）仅适用于jquery动画效果，而.css（）不是其中之一。

如何延迟此循环？

Answer 1

我建议使用jQuery计时器插件：http://jquery.offput.ca/js/jquery.timers.js

$('#LoginButton').click(function () {
    var times = 13;
    var delay = 300;
    var h = 0, top;
    $(document).everyTime(delay, function(i) {
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top);
        h += 40;
    }, times);
});

如果您不想要任何插件，请使用setInterva / clearInterval：

$('#LoginButton').click(function () {
    var delay = 300;
    var times = 13;
    var i = 0, h = 0, top;

    doMove = function() {
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top);
        h += 40;

        ++i;
        if( i >= times ) {
            clearInterval( interval ) ;
        }
    }

    var interval = setInterval ( "doMove()", delay );
});

Answer 2

您可以使用setTimeout（）和clearTimeout（）函数来完成此任务。

IE：

var GLOBAL_i = 0;

function doAnimation() {

    var h = GLOBAL_i * 40;
    var top = h + 'px';
    $('#ajaxLoading').css('background-position', '0 -' + top);

    if (GLOBAL_i < 12) {
        GLOBAL_i++;

        t=setTimeout(doAnimation, 800);
    }
}

$('#LoginButton').click(function () {

    doAnimation()

});

Answer 3

您是否考虑过使用animate（）而不是css（）？我不是百分百肯定我明白你想要完成什么，所以这有点像黑暗中的镜头。

http://api.jquery.com/animate/

Answer 4

Chrome，Safari和IE3 +应该支持background-position-y，所以如果你定位这些特定的浏览器，使用jquery你可以在animation()属性上定时backgroundPositionY - {{3 }} （在Firefox上效果不起作用）

JS / jQuery延迟循环获取欲望结果（延迟（）不起作用）

4 个答案: