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

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()ing hide() 会使元素仍然可见，这意味着对处理程序的下一次调用将在 visible 元素上执行 .show()，而这绝对不会产生任何效果。

解决方法包括:

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

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

编辑:使用 .show() 和 重现类似 .toggle() 行为的最接近方法。 hide() 方法就是在调用 .show() 之前添加一个 .css('display', 'none') ，这样可以确保 .show() 达到了预期的效果:

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

Fiddle

如果元素已经隐藏，.css 将不起作用；如果元素部分显示，它将隐藏它，确保 .show() 执行，而不是由于元素被视为可见而被忽略。

这与 .stop(true, false).toggle() 具有相同的效果，但使用 2 个不同的 .show()/ .hide() 根据要求的方法。