如何延遲增加var？

我試着在用戶接管的鏈接如何延遲增加var？

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/

來源

2013-04-03 Ramon Vasconcelos

燦我們看到一個類似於你想要做的事情的演示 - 在另一個網站上它可能已經完成了，或許？只是我認爲人們可能會在這裏得到錯誤的想法 - 從你的代碼中，這隻會運行一次。所以，如果你懸停，unhover，和懸停再次，裏面'下一個（）'將只執行首次作爲，爲你正確地說，'i'遞減代碼-10幾乎瞬間。根據我的估算，您希望每當用戶將鼠標懸停在'＃next'上時，都會發生這種情況，對嗎？ – ClarkeyBoy 2013-04-03 19:34:39

PS如果你希望它發生的每用戶將鼠標懸停'＃next'時間，設置'I = 0'的'hover'函數內。我不確定這是否僅在鼠標輸入時執行，或者一直在盤旋時執行，請記住。 – ClarkeyBoy 2013-04-03 19:36:45

1分鐘，生病後它的jsfiddle – 2013-04-03 19:39:19

可以使用setTimeout函數

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

只是用在給定的時間間隔

來增加你的動畫值，因爲這仍然ISN」解決，這是一個解決方案。您可以根據需要更改超時/動畫速度。

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-03 19:26:36 75inchpianist

這個'setTimeout'將會調用undefined，因爲next（）會立即被調用並返回undefined，即使你將它改爲setTimeout（next，1000）;它沒有多大意義，因爲在1000毫秒之後next將被調用10次。 – 2013-04-03 23:32:08

ummm jsfiddle？ – 75inchpianist 2013-04-04 01:07:10

jquery動畫排隊，這就是爲什麼它似乎工作，但你的例子當你刪除'setTimeout（next（），1000）''，並且在那裏只寫'next（）;'時，它將以完全相同的方式運行。 'setTimeout'在你的代碼中沒有效果。在'next'函數中放置'console.log'，你會看到它。 – 2013-04-04 10:11:21

我想你誤會了animate一樣。嘗試用此替換整件事：

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

Animate已經照顧動畫，延遲，作品。

來源

2013-04-03 19:28:12

對於' - = 10'來說+1。我希望它適用於我嘗試使用它時）; – Ejaz 2013-04-03 19:32:01

啊，順便說一句，你有一個額外的'{'in'animate' – Ejaz 2013-04-03 19:33:01

@Ejay我剛剛解決了這個問題，但是謝謝 – 2013-04-03 19:33:44

像另一個回答者指出，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，所以你沒有得到任何動畫。

來源

2013-04-03 19:30:13

「只要while循環正在執行......」 - 你指的是什麼while循環？通過我的推算，視圖可以在代碼之外的30毫秒內更新。另一個函數可以非常高興地在30毫秒內將'left'設置爲0。 – ClarkeyBoy 2013-04-03 19:40:17

他的問題中的while循環 - 他的第一次嘗試。 – 2013-04-03 19:43:11

你也能設置，可以在你的「懸停」事件真被設置布爾變量，並以「懸停去」事件假的，所以你的while循環會像這樣

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

來源

2013-04-03 19:30:41

如何延遲增加var？

回答

相關問題