爲什麼在此代碼中連續顯示和隱藏行爲錯誤？

Question

演示：http://jsfiddle.net/sunnycpp/fMXyP/5/

連續顯示，隱藏調用產生一個錯誤，動畫停止並且有時不會恢復。這是我的代碼中的jQuery錯誤或錯誤？

這裏是從jsfiddle複製粘貼的代碼。

myButtonManual.on("click", function() { 
    isVisible = !isVisible;  
    myHero.stop(true,false);  
    if(isVisible) {   
    myHero.show('slow'); 
    myButtonManual.text("Manual Hide"); 
    } else {   
    myHero.hide('slow'); 
    myButtonManual.text("Manual Show"); 
    } 

Answer 1

這是不是一個錯誤。

考慮看看這一行：

myHero.stop(true,false); 

當你停止.hide()在它的中間沒有跳到動畫的結尾，是可見會留visible的元素。

你的邏輯isVisible = !isVisible將被打破，然後作爲.stop()荷蘭國際集團一hide()離開元素仍清晰可見，這意味着到處理器的下一次調用將是絕對不會有效果visible元素上執行.show()。

變通方法包括：

• 卸下.stop()，這將排隊show()和hide()結束後執行它;

• 使用.stop(true) - 相當於.stop(true, true) - ，這將是相當直率，因爲它會強制動畫結束，因爲它突然開始下一個;

編輯：使用.show()和.hide()方法是簡單地增加一個.css('display', 'none')調用.show()之前重現.toggle()樣的行爲最接近的方式，這將確保.show()有預期的效果：

isVisible = !isVisible; 
myHero.stop(true, false); 
if (isVisible) { 
    myHero.css('display', 'none').show('slow'); 
} else { 
    myHero.hide('slow'); 
} 

Fiddle

如果元素已經隱藏，該.css將不起作用;如果元素部分顯示，則會隱藏它，以確保執行.show()而不是被忽略，因爲元素被視爲visible。

這與.stop(true, false).toggle()具有相同的效果，但使用2個不同的.show()/.hide()方法按要求工作。