Question

请参阅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中使用。

我试过四处寻找，但找不到一种简单的褪色技术让我感动; 有一堆图像定位一组控件（在本例中为＆lt; li＆gt;元素）当您将鼠标悬停在特定控件上时其中一个图像淡入，其他图像都应该隐藏，当前的图像应该淡出。

IE似乎总是出错并且没有正确淡出。有谁知道我哪里出错了？

Answer 1

在黑暗中几枪，我现在要回家睡觉了：）

我从Prototype中知道，淡化效果更倾向于在要褪色的元素中有一个无类的，简单的<div>方向。你能尝试将它添加到每个图像吗？
如果您提供图片布局（例如使用zoom: 1 CSS属性）
如果您为图像指定背景颜色会发生什么。

Answer 2

以下适用于我（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>

简单的javascript淡化效果在IE7 / 8中不起作用，在其他浏览器中很好

2 个答案: