Анимация непрозрачности не работает должным образом в 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});
}

Как я могу исправить эту проблему?

Ответы

Ответ 1

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

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

Ответ 2

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

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

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

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

#list_box { background-color: red }

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

Ответ 3

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

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

Ответ 4

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

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

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

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

$('#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.

Ответ 5

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

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

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

Ответ 6

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

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

Поскольку jQuery поддерживает кросс-браузерную поддержку, если вы закончите анимацию фильтра через IE, то вероятность того, что jQuery пытается поддерживать IE, и конфликт возникает, когда jQuery запускает изменение непрозрачности x2.

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

Ответ 7

Я заметил, что проблема была вызвана положением: относительным контейнером. Если "переключение" на абсолютную анимацию непрозрачности будет работать.

Ответ 8

У меня была такая же проблема с IE 7, проблема была конечной запятой после свойства непрозрачности

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

Это должно быть:

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

Ответ 9

Я нашел решение, которое сработало для меня: position:inline-block; Это работает для угасания непрозрачности текста, я не пробовал его с помощью фонового изображения CSS. Может быть, это все равно помогает.

Я просто хотел сообщить небольшую ошибку с методом fadeTo в Internet Explorer 8. Это не сработает, если ваш элемент как "display" установлен на "inline". Я обнаружил, что вам нужно поместить его в "встроенный блок", а затем он отлично работает. В Интернете нет ничего об этом, и это не первый случай, когда у меня есть эта проблема.

Не знаю, правильно ли это сообщить об этой проблеме, но я уверен, что кто-то прочитает это сообщение:)

найдено http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

Ответ 10

Я решил это с добавлением непрозрачного фона к анимированному элементу:

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;
}

JS:

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

Работает для IE7-8

Надеюсь, это поможет кому-то;)

Ответ 11

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

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

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

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

Ответ 12

Хорошо, это может немного помочь, я нашел решение на этом сайте о конкретной проблеме 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/>
});

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

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

Ответ 13

Такая же проблема с 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);
                                        }
                         );
                }
     );

Ответ 14

Используете ли вы pngfix script? это может быть виновником.