Question

我试图在用户通过链接时动画元素

var i = 0;

function next(){
    while (i>-10) {
        i--;
        $('#conteudo').animate({left:"'"+i+"px'"},'slow');
    };
}

$('#next').hover(function(){
    next();
});

但它立即递增值-10 ..我试图做这样的事情：-1 ..- 2 ..- 3 ..- 4 ..直到它达到-10。我可以在延迟之前控制延迟吗？

我做错了什么？

这是jsfiddle http://jsfiddle.net/KwhSg/

的链接

Answer 1

我猜你误解了animate的作用。尝试用这个替换整个事情：

$('#next').hover(function(){
    $('#conteudo').animate({left:'-=10'},'slow');
});

Animate已经处理了动画，延迟和工作。

Answer 2

就像另一位回答者指出的那样，animate旨在为您解决这个问题。但是为了学习，这里是如何做你想做的事情：

var i = 0;
function next(){
    $('#conteudo').css({left:"'"+i+"px'"});
    // use setTimeout to pause for 30 milliseconds and let the view update
    if (i-- > -10) setTimeout(next, 30);
}

$('#next').hover(function(){
    next();
});

您需要使用setTimeout而不是while循环。它在迭代之间暂停（在这种情况下为30毫秒），以便视图可以更新。

在您的原始尝试中，只要while循环正在执行，它就可以完全控制进程，因此在循环结束之前视图无法更新。循环结束后，它已经完成递减i，因此你不会得到任何动画。

Answer 3

你可以设置一个布尔变量，可以在你的“悬停”事件上设置为true，在你的“hover out”事件中设置为false，这样你的while循环就像这样

function next(){
    while (i>-10 && !notHovered) {
        i--;
        $('#conteudo').animate({left:"'"+i+"px'"},'slow');
    };
}

Answer 4

你可以使用setTimeout函数

http://www.w3schools.com/jsref/met_win_settimeout.asp

只需使用它以给定间隔递增动画值

由于这仍然没有解决，这是一个解决方案。您可以根据需要更改超时/动画速度。

http://jsfiddle.net/649az/

var i =10;
function next(){        
     $('#conteudo').animate({left:"-=10"},'slow');
}


$('#next').hover(function(){

    while (i>0){
        i--;
       setTimeout(next(),1000);
    }
});

如何延迟增加var？

4 个答案: