动画（）和不透明度答案

【问题标题】：animation() and opacity动画（）和不透明度
【发布时间】：2011-08-27 15:09:34
【问题描述】：

不能让这个动画工作

var highlight = $('<div class="insert_highlight" style="top:25px; left:100px; width:50px; height:50px"></div>').appendTo($(document.body))
    .animate({
            opacity : 0.1
        },
        400);

div.insert_highlight {
    position:absolute;
    background:#00ff00;
    z-index:-1;
    /*display:none;*/
}

现在不透明度从 1 逐渐降低到 0.1，但是如果我取消样式中的 display:none;，则不会发生任何事情，并且元素保持在不透明度 0 或 display:none

【问题讨论】：

标签： javascript jquery css opacity jquery-animate

【解决方案1】：

var highlight = $('<div class="insert_highlight" style="top:25px; left:100px; width:50px; height:50px"></div>').appendTo($(document.body))
    .css({display: 'block', opacity:0})
    .animate({
            opacity : 0.1
        },
        400);

【讨论】：

【解决方案2】：

看看这个JSFiddle DEMO

我用过：

var highlight = $('<div class="insert_highlight" style="top:25px; left:100px; width:50px; height:50px"></div>').appendTo($(document.body))
    .css('display','none') // set css to hide element
    .fadeTo(400 , 0.1);   // and finally go to desired opacity

【讨论】：

-10 ahah..:P 顺便说一句，是的，我能理解你的意见（我的意思是，而不是添加“为了好玩”也许可以解释原因）。而且..对于OP ..最好进行更长的过渡并达到大于0.1的值；）
Aaaaaargh 我重新编辑了我的演示，其中包含所有提到的内容！没关系，clarkk 不喜欢 fadeTo ;)

【解决方案3】：

display:none 表示该元素不会被浏览器渲染...你想实现什么？您必须设置display:block 才能看到它

【讨论】：

也尝试过使用 visibility:hidden.. 但结果是一样的.. 我只是习惯使用 display:none 因为它可以工作（但在这个例子中没有）
但是你想让元素在动画结束时消失吗？还是从透明开始变成不透明？
它必须从一开始就透明
ok 只需设置 css（通过 jquery 的 css 方法） opacity:0 和 display:block 在开始动画之前;)

【解决方案4】：

这就是问题本身。

display:none 不等于 opacity:0;

如果一个元素是 100% 透明的，那么它在 CSS 中仍然是“可见的”。

给它

opacity:0; /*(for css3 supporting browsers) and*/ 
filter:alpha(opacity=0); /*for IE 6-8 and */
-ms-filter:alpha(opacity=0); /*for ie9*/

这应该可以解决问题

【讨论】：

没有“更快”的解决方案吗？
ie 很糟糕，但它有效。为了符合标准，您应该将 yhose 过滤器内容放在不同的 css 文件中，并将它们与条件 cmets 链接
@beerwin：为什么要为不透明度添加 CSS 规则？ OP 正在使用 jQuery，它很好地解决了跨浏览器的不透明度问题。
是的，确实如此，但是恕我直言，进一步增加访问者计算机上的负载并不是一件好事。我为此使用 javascript 作为最后的手段。这是我的意见，不想把它压在任何人的喉咙上
@beerwin：增加负载？ jQuery 已经加载并运行动画。让它处理跨浏览器的 CSS 不透明度问题是其工作的一部分，与替代问题相比几乎无关紧要......调用通过条件 cmets 调用的各种浏览器特定的 CSS 文件。