为什么连续显示和隐藏在此代码中表现错误？

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()使该元素仍然可见，这意味着下一次对处理程序的调用将在.show()上执行visible元素将完全没有效果。

解决方法包括：

• 删除.stop()，这会将show()排队并在hide()结束后执行;

• 使用.stop(true) - 相当于.stop(true, true) - ，这将是相当直率的，因为它会强制动画结束，因为它突然开始下一个;

修改：使用.toggle()和.show()方法重现.hide()类行为的最近方法是简单地添加.css('display', 'none')在致电.show()之前，这将确保.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()方法。