动画（）和不透明度

Posted 2023-05-08

【中文标题】动画（）和不透明度

【英文标题】：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

【参考方案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 文件。