Javascript 动画不透明度不'；我不能在IE上正常工作

我正在尝试使用

animate（）

更改

div

的高度和不透明度。div在CSS中有一个图像背景。它在Firefox和Safari上运行良好，但当我在IE中测试它时，背景会被删除。这是我的代码：

if (jQuery.support.opacity) {
    jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
} else {
    jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300});
}

---

如何解决此问题？

我的印象是jQuery为您提供了整个不透明性支持。 这适用于所有浏览器吗

$('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});

---

您是否使用了一些pngfix脚本？这可能是罪魁祸首。

您可以使用

fadeTo

来完成您想做的事情：

$('#list_box').fadeTo("slow", 0.33);

fadeIn

和

fadeOut

可以从0%过渡到100%，但上述选项将允许您淡入任意不透明度

---

（）

我也有同样的问题。当我将不透明度设置为40%时，我无意中找到了答案：

$('#list_box').stop().animate({opacity: '.4'},"slow");

我注意到，使不透明度跳到100%，然后动画降低到40%。尤里卡

因此，现在我在动画之前显式地将不透明度设置为零：

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");

这动画制作很流畅，只是文字在IE中看起来仍然很恐怖

为了清理文本，我在动画之后从IE中的css中删除了不透明度。这似乎使IE6和IE8中的文本更加清晰

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
    //remove the opacity in IE
    jQuery.each(jQuery.browser, function(i) {
        if($.browser.msie){
            $('#list_box').css({opacity:''});
        }
    });
});

---

我正在一台Mac上并行测试，在IE6和IE8中。在Mac端，一切似乎都很正常。

您不需要为IE编写特殊的处理程序，jQuery在幕后为您完成所有工作：

jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300);

然而：如果您的背景图像是一个正在消失的24位透明PNG，您需要注意，您不能将

过滤器：alpha

（jQuery在IE中正确地在幕后使用）与IE7或IE8中的24位透明PNG相结合。我认为唯一的解决方法是在使用过滤器的对象上设置背景色（而不是透明的）

如何测试：只需在

背景图像

声明后向CSS添加类似的内容，即可将

列表框

上的背景色设置为纯色：

#list_box { background-color: red }

---

如果背景图像仍然存在，并且您的

#list_框

动画设置正确（除了可怕的背景），则您知道问题所在，并且必须找到另一种方法来实现您的目标。

在jQuery中，一旦div在符合标准的浏览器中设置为不透明度：0或IE中设置为过滤器：alpha（不透明度=0），只需使用$（'#div'）.animate（{opacity:1}，100）；由于jQuery支持跨浏览器支持，如果最终通过IE设置过滤器的动画，那么jQuery很可能试图支持IE，而当jQuery触发不透明度更改时，冲突就会出现

$('#div').animate({opacity:1},100); 我希望这有帮助。我也有同样的问题，加上IE无法处理包含多个项目的div堆栈上的淡入淡出的奇怪问题

回答得非常（非常）晚，但是当我在IE8中寻找关于jquery v动画问题的帮助时，这是谷歌的头条新闻，我想我应该把它贴在这里

---

我的问题与IE中的hasLayout错误有关，并将“display:inline block”添加到要淡出的元素中修复了该问题。

好的，这可能会有点帮助，我在这个网站上找到了一个关于确切问题的解决方案

$(function() {

        $(".hover1").css("opacity","1.0"); // Default set opacity to 1.0

        // On Mouse over
        $(".hover1").hover( 
                            function () {

                                        // SET OPACITY TO 15%
                                        $("span.hover2").stop().animate({opacity: 0.15}, 1200);
                                        },

                                        // ON MOUSE OUT
                            function () {

                                        // SET OPACITY BACK TO 100%
                                        $("span.hover2").stop().animate({opacity: 1.0}, 1200);
                                        }
                         );
                }
     );

总之，一般的问题是IE上的不透明度过滤器，在你的具体情况下，你没有多少可以做的，思想

但是如果你淡入淡出，为了防止png背景图像出现问题，你只需要删除fx结束时jQuery函数添加的过滤器属性。只需使用回调函数，类似的操作即可：

$('#node').fadeOut('slow', function() {<br/>
    this.style.removeAttribute('filter');<br/>
});

---

我也有同样的问题：

$('#nav li').hover(function() {
 $(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
 $(this).stop().animate({opacity: '1'}, 'slow');
});

---

我只是简单地添加了float:left；到#nav li css，它解决了这个问题。

我对IE 7也有同样的问题， 问题是不透明属性后面有一个逗号

jQuery(this).animate({opacity:1.00,},800);

它必须是：

jQuery(this).animate({opacity:1.00},800);

---

我找到了一个适合我的解决方案：

position:inline块
这适用于褪色的文本不透明度，我还没有尝试与CSS背景图像。也许这会有帮助

我只是想报告Internet Explorer 8中fadeTo方法的一个小错误。如果您的元素“display”设置为“inline”，它将不起作用。我发现您需要将它置于“内联块”中，然后它就可以完美地工作了。网络上没有这方面的内容，这也不是我第一次遇到这个问题

我不知道这是否是报道这个问题的正确方式，但我相信有人会读到这篇文章：）

在
发现与IE8相同的问题。在中添加“display:inline block”。hover2修复了该问题

$(function() {

        $(".hover1").css("opacity","1.0"); // Default set opacity to 1.0

        // On Mouse over
        $(".hover1").hover( 
                            function () {

                                        // SET OPACITY TO 15%
                                        $("span.hover2").stop().animate({opacity: 0.15}, 1200);
                                        },

                                        // ON MOUSE OUT
                            function () {

                                        // SET OPACITY BACK TO 100%
                                        $("span.hover2").stop().animate({opacity: 1.0}, 1200);
                                        }
                         );
                }
     );

我注意到问题是由位置引起的：容器的相对位置。如果“切换”到绝对不透明度动画将起作用。
我通过向动画元素添加不透明背景解决了这个问题：

CSS:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 195px;
    height: 274px;
    cursor: pointer;
    background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
    filter: alpha(opacity=0); /* IE6-7 */     
    zoom: 1;
}

$('.overlay').hover(
    function(){
        $(this).animate({'opacity': 0.7}, 300);
    },
    function(){
        $(this).animate({'opacity': 0}, 250);
    }
);

JS:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 195px;
    height: 274px;
    cursor: pointer;
    background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
    filter: alpha(opacity=0); /* IE6-7 */     
    zoom: 1;
}

$('.overlay').hover(
    function(){
        $(this).animate({'opacity': 0.7}, 300);
    },
    function(){
        $(this).animate({'opacity': 0}, 250);
    }
);

为IE7-8工作

希望这能帮助别人；）
 你说得对。当涉及到不透明度时，jQuery会处理跨浏览器的差异。IE8中仍然存在问题。请看。您有关于此的更多信息的链接吗？我有一种感觉，这将是解决方案（即，IE中没有解决方案），但希望了解更多信息。另外，只要我列出我喜欢的东西，IE团队中的某个人就会做得很好。谢谢！添加“float:left”修正了我的不透明度，并在这个过程中强化了我对IE的厌恶：）在开始褪色之前将不透明度设置为0，真正使其与IE一起工作。