jQuery选择器检查元素是否动画隐藏答案

【问题标题】：jQuery selector to check if an element is animating to hiddenjQuery选择器检查元素是否动画隐藏
【发布时间】：2013-01-08 00:03:05
【问题描述】：

有没有办法判断一个元素是隐藏的还是正在隐藏的过程中（通过动画）？我能想到的唯一方法是在您调用show 或hide 时在元素的data 中存储一个标志，但我想知道是否还有其他方法？

【问题讨论】：

你最终是如何实现这个的？
在动画开始时在data 中设置一个标志，并再次检查该标志。
@nickf 啊，一个解决方案，但不是那么优雅！我很想看到你让自定义选择器正常工作:)
@alex - 哈哈，挑战？我不认为按照您的建议使用 setTimeout 会起作用，因为那时选择将异步运行。必须有一些内部“目标不透明度”值...
@nickf 是的，我就是这么想的……我想知道它是否以某种方式暴露了。我可能会在这里问一个问题:)

标签： javascript jquery

【解决方案1】：

你能为它做一个自定义的 jQuery 选择器吗

 (function($) {
  var endOpacity,
      oldStep = jQuery.fx.step.opacity;

  $.fx.step.opacity = function( fx ) {
      endOpacity = fx.end;

      return oldStep(fx);
  };

$.expr[':'].hiding = function(obj){
  var $this = $(obj);

   return ($this.is(':hidden') || ($this.is(':animated') && endOpacity === 0));
};

})(jQuery);

This worked for me（不过可能需要更多测试）。

所以只需添加:hiding，它将匹配隐藏的元素，以及当前被设置为 0 动画的元素。它现在将仅匹配正在消失而不是出现的元素。

【讨论】：

这是一个好的开始，但我认为当有多个元素时你会遇到问题。看到这个：jsbin.com/ojuro3/2/edit——点击段落让它们淡入淡出。每一秒，隐藏的都是红色的，非隐藏的是蓝色的。
@nickf 这个呢，如果去掉元素检查jsbin.com/ojuro3/3/edit

【解决方案2】：

你会得到隐藏的$(":hidden")，然后是动画的$(":animated")和:animated，检查.queue()是否有hide方法。

【讨论】：

我用这个代码检查了队列：$el.slideUp('slow'); console.log($el.queue())，里面只有["in progress"]
嗯，这就是我可以给你的所有指针 - 如果你检查了 jQuery 源代码，你可能会找到一种从队列对象中读取条目的方法。

【解决方案3】：

你可以像这样检查元素是否动画：

 if( !$('.your-element').is(':animated') ) {
   // do animation...
 } else {
   return false;
 }

【讨论】：