如何将jQuery类名元素CSS属性检测与animate动画效果结合

你当前使用的each遍历方案逻辑正确，下面提供两种更简洁高效的实现方式，同时先说明你之前合并功能失败的核心原因：$(".box").css('display') == 'block'返回的是布尔值，不是jQuery元素对象，因此无法调用animate这类jQuery实例方法。

方案1：内置:visible选择器（绝大多数场景推荐） #

jQuery内置的:visible选择器会自动匹配display不为none的元素，刚好符合你筛选display: block元素的需求，一行代码即可完成功能：

$('.box:visible').animate({width: 'toggle'});

该方案代码量最小，且jQuery对内置选择器做了底层性能优化，执行效率高于手动遍历判断。

方案2：filter自定义过滤（特殊场景适用） #

如果你需要严格仅匹配display属性值完全等于block的元素（比如要排除display: flex、display: grid等其他可见状态的元素），可以使用filter方法自定义过滤规则：

$('.box').filter(function() {
  return $(this).css('display') === 'block';
}).animate({width: 'toggle'});

该方案灵活性更高，支持自定义任意过滤规则，同时保留了jQuery链式调用的编码风格，可读性比手动each遍历更高。

内容的提问来源于stack exchange，提问作者Ross Symonds