Простой эффект затухания JavaScript не работает в IE7 / 8, отлично работает в других браузерах

StackOverflow https://stackoverflow.com/questions/1904826

  •  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)
  • Что произойдет, если вы придадите изображениям фоновый цвет?
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top