如何使用jQuery切换元素的显示和隐藏，并设置动画效果？

Question

当我想要关闭组件时，我可以使用

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

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

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

但是现在我想将这两个组合起来。我希望确保组件被切换关闭（不仅仅是来回切换），并且我想指定过程的持续时间。

根据jQuery API，我应该能够指定一个带有选项的对象。 然而，以下是：

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

只是在给定时间内来回切换驴子（不过），而我希望它被切换为不可见。当我审查选项时，我注意到没有一个选项涉及显示，所以我担心上述内容是否与jQuery等效处理。

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

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

- Konrad Viltersten

---

你可以使用$("#emailInvalid").hide(700)。 - rishabh dev

@rishabhdev 隐藏 持续时间 是什么意思？我一直以为它已经被弃用了（就像 show 一样），从1.7或1.9版本开始，被 toggle 取代了（或者类似于这样的版本号）。 - Konrad Viltersten

@KonradViltersten: 你能为这个创建一个fiddle吗？ - Parag Bhayani

@ParagBhayani 不确定我是否理解。您是否想要看一下弃用组件的演示？请告知。 - Konrad Viltersten

我认为使用animate()函数可以更加定制化，允许在提供的持续时间内动画化任何CSS属性，并在动画完成时运行回调函数。尽管使用toggleClass()函数来在起始状态（类1）和结束状态（类2）之间使用CSS动画可能会更加可定制化。但是如果不知道您想要实现什么，很难提供通用建议。 - David Thomas

Answer 1

仅在可见时应用切换：

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

或者

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

- rishabh dev

Answer 2

简短回答 - 你不能。

你的选择是构建自定义内容并在自定义代码中执行逻辑。或者，您可能希望在具有所需外观的不同类之间切换。请查看toggleAss()以获取详细信息。

为了完整起见，我还提供了一个链接animate()，如@DavidThomas所建议的那样，尽管我没有使用过它。

- user1675891

---

@DavidThomas 哈哈，我在阅读他的回答时错过了这一点。我猜他在 shift 上很快，但没有到达 cl。或者这是对我例子中的 驴子 的引用。好眼力，伙计... 或者可能是容易看到自己想看到的东西，呵呵。 - Konrad Viltersten

Answer 3

我认为这就是您想要的 -- 如果元素(#donkey)可见，则将其隐藏，如果它已隐藏，则不会发生任何事情。

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

Codepen: http://s.codepen.io/SteveClason/debug/RRwpBd

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

- Steve Clason

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);

- hoefsten