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

Question

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

为什么？

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

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

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