Анимационная непрозрачность не работает правильно над IE

У меня сложилось впечатление, что jQuery делает Вся поддержка непрозрачности для вас. Работает ли это для всех браузеров?

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

Вы используете какой-нибудь скрипт pngfix? это может быть виновником.

Вы можете использовать fadeTo , чтобы выполнить то, что хотите:

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

fadeIn и fadeOut переходят от 0 до 100% , но приведенное выше позволит вам перейти к произвольной прозрачности.

( http://docs.jquery.com/Effects/fadeTo#speedopacitycallback )

У меня та же проблема. Я наткнулся на ответ, когда установил полупрозрачность на 40%:

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

Я заметил, что полупрозрачность подскочила до 100%, затем анимировал до 40%. Эврика.

Итак, теперь я явно установил непрозрачность на ноль перед анимацией:

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

Это анимация гладкая, за исключением того, что текст все еще выглядит ужасно в IE.

Чтобы очистить текст, я удалил непрозрачность из css в IE после анимации. Похоже, что это немного очищает текст в 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 в Parallels, в IE6 и IE8. Похоже, на Mac все отлично работает

Вам не нужно писать специальный обработчик для IE, jQuery делает все это за кулисами:

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

HOWEVER: Если у вас в качестве фона исчезает 24-битный прозрачный PNG, вы должны знать, что вы не можете комбинировать фильтр: alpha (который jQuery корректно использует за кулисами в IE) с 24-битным прозрачным PNG в IE7 или IE8. Я считаю, что единственный способ обойти это - установить цвет фона (кроме прозрачного) на объекте, на котором вы используете фильтр: alpha

Как протестировать : Просто установите цвет фона на #list_box в сплошной цвет, добавив что-нибудь подобное в ваш CSS после вашего объявления фона-изображения :

#list_box { background-color: red }

Если фоновое изображение остается, а ваш #list_box анимируется правильно (за исключением отвратительного фона), вы знаете, в чем проблема, и вам придется найти другой способ выполнить то, что вы хотите.

Если в jQuery для div задано значение opacity: 0 (в браузерах, совместимых со стандартами) или filter: alpha (opacity = 0) в IE, вы можете просто использовать

$('#div').animate({opacity:1},100);

Надеюсь, это поможет. У меня была такая же проблема, плюс странные проблемы с IE, неспособным справиться с затуханием в стеке div с несколькими элементами в нем.

Очень (очень) поздно с ответом, но так как он находится на вершине Google, когда я обратился за помощью по проблеме jquery v animate в IE8 I думал, что выложу это здесь.

Моя проблема была связана с ошибкой hasLayout в IE, и добавление «display: inline-block» к элементу, который нужно затенять, устранило проблему.

Хорошо, это может помочь немного, я нашел на этом сайте решение о точной проблеме http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

в заключение, общая проблема - это фильтр непрозрачности в IE, в вашем конкретном случае вы мало что можете сделать, подумал

, но в случае, если вы постепенно появляются и исчезают, чтобы предотвратить проблему с фоновым изображением png, вам просто нужно удалить атрибут фильтра Функция jQuery добавлена, когда fx заканчивается. Просто используйте функцию обратного вызова, что-то вроде этого:

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

в случае, если селекторы возвращают более одного, используйте функцию each, примерно так:

$('.nodes').fadeIn('fast',
    function() {
        $(this).each (
            function(idx,el) {
                el.style.removeAttribute('filter');
             }
        );
     }
);

У меня была такая же проблема с этим:

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

Я просто добавил float: left; в #nav li css, и проблема устранилась.