Простой эффект затухания JavaScript не работает в IE7 / 8, отлично работает в других браузерах
-
19-09-2019 - |
Вопрос
Видишь http://jonesonter.notomato.com.au/.
У меня есть простой эффект затухания, создаваемый при наведении курсора мыши на некоторые элементы списка, расположенные над стопкой изображений, которые все абсолютно расположены друг над другом.
$("#homeNav li").hover(function(){
//make a variable and assign the hovered id to it
var elid = $(this).attr('id');
//hide the image currently there
$("div#homeImages div").hide();
//fade in the image with the same id as the selected buttom
$("div#homeImages div#" + elid + "").fadeIn("slow");
});
Однако это не будет работать в Internet Explorer.
Я пробовал искать по всему миру, но не могу найти простую технику затухания, которая позволила бы мне;иметь стопку изображений расположить набор элементов управления (в данном случае < li> элементы) при наведении курсора мыши на определенный элемент управления одно из изображений исчезает, все остальные должны быть скрыты, текущее должно исчезнуть.
IE, кажется, всегда выдает ошибку и не исчезает должным образом.Кто-нибудь знает, где я иду не так?
Решение
у меня работает следующее (изменения в html):
<div id="homeImages">
<div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/conditioned.jpg');" id="homeConditioned"></div>
<div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/guided.jpg');" id="homeGuided"></div>
<div style="display: block; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/informed.jpg');" id="homeInformed"></div>
<div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/shaped.jpg');" id="homeShaped"></div>
<div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/sustained.jpg');" id="homeSustained"></div>
</div>
Другие советы
Несколько снимков в темноте, а сейчас я иду домой спать :)
- Я знаю из Prototype, что эффект затухания предпочитает иметь бесклассовый, простой
<div>
непосредственно внутри элемента, который должен быть выцветшим.Можете ли вы попробовать добавить это к каждому изображению? - Что произойдет, если вы зададите расположение изображений (напримериспользуя
zoom: 1
Свойство CSS) - Что произойдет, если вы придадите изображениям фоновый цвет?