1

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

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/的链接

4

4 回答 4

5

我猜你误解了什么animate。尝试用这个替换整个东西：

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

Animate已经负责动画、延迟和作品。

于 2013-04-03T19:28:12.163 回答
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 循环正在执行，它就可以完全控制该过程，因此在循环完成之前视图无法更新。一旦循环完成，它已经完成了 decrementing i，所以你不会得到任何动画。

于 2013-04-03T19:30:13.253 回答
2

您可以设置一个布尔变量，可以在“悬停”事件上设置为真，在“悬停”事件上设置为假，所以你的 while 循环就像这样

function next(){
    while (i>-10 && !notHovered) {
        i--;
        $('#conteudo').animate({left:"'"+i+"px'"},'slow');
    };
}
于 2013-04-03T19:30:41.223 回答
0

您可以使用 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);
    }
});
于 2013-04-03T19:26:36.800 回答