Question

无法使此动画正常工作

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或显示：无

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

Answer 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

Answer 3

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

Answer 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*/

应该做的伎俩

animation（）和不透明度

4 个答案: