Я пытаюсь использовать 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});
Вам не нужно писать специальный обработчик для 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 анимируется правильно (за исключением отвратительного фона), вы знаете, в чем проблема, и вам придется найти другой способ выполнить то, что вы хотите.
Очень (очень) поздно с ответом, но поскольку это находится на вершине Google, когда я искал помощь с проблемой jquery v animate в IE8, я думал, что разместил ее здесь.
Моя проблема была связана с ошибкой hasLayout в IE и добавлением "display: inline-block" к элементу, который должен исчезнуть, устранил проблему.
У меня такая же проблема. Я наткнулся на ответ, когда я установил непрозрачность до 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.
У меня была такая же проблема:
$('#nav li').hover(function() {
$(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
$(this).stop().animate({opacity: '1'}, 'slow');
});
Я просто добавил float: left; к #nav li css, и он исправил проблему.
В jQuery, когда у div установлено значение opacity: 0 (в браузерах, совместимых со стандартами) или фильтр: alpha (opacity = 0) в IE, вы можете просто использовать
$('#div').animate({opacity:1},100); Поскольку jQuery поддерживает кросс-браузерную поддержку, если вы закончите анимацию фильтра через IE, то вероятность того, что jQuery пытается поддерживать IE, и конфликт возникает, когда jQuery запускает изменение непрозрачности x2.
Надеюсь, это поможет. У меня была такая же проблема, плюс нечетные проблемы с тем, что IE не смог обработать выцветание в стеке div с несколькими элементами в нем.
Я заметил, что проблема была вызвана положением: относительным контейнером. Если "переключение" на абсолютную анимацию непрозрачности будет работать.
У меня была такая же проблема с IE 7, проблема была конечной запятой после свойства непрозрачности
jQuery(this).animate({opacity:1.00,},800);
Это должно быть:
jQuery(this).animate({opacity:1.00},800);
Я нашел решение, которое сработало для меня: position:inline-block;
Это работает для угасания непрозрачности текста, я не пробовал его с помощью фонового изображения CSS. Может быть, это все равно помогает.
Я просто хотел сообщить небольшую ошибку с методом fadeTo в Internet Explorer 8. Это не сработает, если ваш элемент как "display" установлен на "inline". Я обнаружил, что вам нужно поместить его в "встроенный блок", а затем он отлично работает. В Интернете нет ничего об этом, и это не первый случай, когда у меня есть эта проблема.
Не знаю, правильно ли это сообщить об этой проблеме, но я уверен, что кто-то прочитает это сообщение:)
найдено http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm
Я решил это с добавлением непрозрачного фона к анимированному элементу:
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
Надеюсь, это поможет кому-то;)
Вы можете использовать fadeTo для выполнения того, что вы хотите сделать:
$('#list_box').fadeTo("slow", 0.33);
fadeIn и fadeOut делают переходы от 0 до 100%, но вышеописанное позволит вам исчезать до произвольной непрозрачности.
(http://docs.jquery.com/Effects/fadeTo#speedopacitycallback)
Хорошо, это может немного помочь, я нашел решение на этом сайте о конкретной проблеме 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');
}
);
}
);
Такая же проблема с 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);
}
);
}
);
Используете ли вы pngfix script? это может быть виновником.