如何切换具有持续时间和显示的 jQuery 元素？

Question

当我想关闭一个我可以使用的组件时

$("#donkey").toggle(false);

当我需要在特定时间段内切换时，我可以使用

$("#emailInvalid").toggle(700);

但现在我想将这两者结合起来。我想确保组件正在切换 off（不仅来回切换）而且我想指定该过程的持续时间。

根据 jQuery API，我应该也可以使用选项指定一个对象。然而，以下

$("#donkey").toggle({ duration: 700, display: false });

只来回切换驴子（不过在上述时间内），而我希望将其切换为隐身状态。当我查看选项时，我注意到有 none 地址 display，所以我担心上面的内容被 jQuery 等同于

$("#donkey").toggle({ duration: 700, biteMe: "in the donkey" });

如何确保切换器隐藏组件（相当于上面第一行代码）和我可以控制流程完成的时间（相当于上面第二行代码）？

Answer 1

仅在可见时应用切换：

 $('#donkey:visible').toggle(500);

或者

   var element=$('#donkey');  
    if(element.css('display') !== 'none'){ 
    element.toggle(500);
}

Answer 2

我认为这就是您想要的——如果元素 (#donkey) 可见，它就会被隐藏，如果它被隐藏，则什么也不会发生。

$( '#button' ).click( function(){
  if( $( '#donkey' ).css( 'display' ) === 'block' ) {
    $("#donkey").toggle( 700 );
  }
});

代码笔：http://s.codepen.io/SteveClason/debug/RRwpBd

Answer 3

简答 - 你不能。

您的选择是构建自定义内容并在自定义代码中执行逻辑。或者，您可能想要在具有您喜欢的外观的不同类之间切换。查看 toggleAss() 了解详情。

为了完整起见，我还按照@DavidThomas 的建议给你一个 link 到 animate()，尽管我没有经常使用那个。

Answer 4

这个小插件可以让您将两者结合起来：

(function ( $ ) {
  $.fn.myToggle = function(show, options) {
    return this.each(function() {
      if ($(this).is(":hidden") ? show : !show) $(this).toggle(options);
    });
  };
}( jQuery ));

简单示例：

$("#donkey").myToggle(false, 700);

如何切换具有持续时间和显示的 jQuery 元素？

How to toggle jQuery element with a duration AND display?

html

javascript

jquery

toggle