2

演示：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");
  }

在此处输入图像描述

4

1 回答 1

2

那不是错误。

看看这一行：

myHero.stop(true,false);

当您将 a 停.hide()在它的中间而不跳到动画的末尾时，一个可见的元素将保持visible。

然后，您的逻辑isVisible = !isVisible将被破坏，因为.stop()ing ahide()使元素仍然可见，这意味着对处理程序的下一次调用将在绝对没有效果.show()的元素上执行。visible

解决方法包括：

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

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

编辑：使用and方法重现类似.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');
}

小提琴

如果元素已经隐藏，则.css将无效；如果元素部分显示，它将隐藏它，以确保.show()执行而不是由于正在考虑的元素而被忽略visible。

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

于 2013-01-18T13:57:03.073 回答