jquery 动画不透明度与显示：无

Posted 2023-05-08

【中文标题】jquery 动画不透明度与显示：无

【英文标题】：jquery animate opacity vs display:none

【发布时间】：2011-09-23 01:40:54

【问题描述】：

如果元素在 CSS 中具有 display:none，则在 jQuery 中将不透明度从 0 设置为 1 不会使元素可见。

为什么？

我需要在 animate() 中添加什么使其可见？

el.css(
            opacity: 0,
            left: - 200
          ).stop().animate(
            opacity: 1,
            left: 0
          , 
            duration: 333
          );

【参考方案1】：

您需要先使用show()^[docs] 方法显示它。

如果您的元素的不透明度尚未为 0，那么您可能需要先设置它：

.css('opacity',0).show().animate(opacity:1);

示例： http://jsfiddle.net/DnE7M/1/

---

或者您可以只使用fadeIn()^[docs] 方法，它也应该处理display。

示例： http://jsfiddle.net/DnE7M/

---

编辑： 使其与添加到问题的代码相关：

el.css(
        opacity: 0,
        left: - 200
      )
   .stop()
   .show()     // <-- make the element able to be displayed
   .animate(
        opacity: 1,
        left: 0
      , 
        duration: 333
      );

您也可以在调用 css()^[docs] 方法时直接执行此操作：

el.css(
        opacity: 0,
        display: 'block',  // <-- 'block' or whatever is appropriate for you
        left: - 200
      )
   .stop()
   .animate(
        opacity: 1,
        left: 0
      , 
        duration: 333
      );