0

见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 似乎总是有错误并且不能正确淡出。有谁知道我哪里出错了？

4

2 回答 2

0

在黑暗中拍了几张照片，我现在要回家睡觉了：）

  • 我从 Prototype 知道淡入淡出效果更喜欢在要淡入淡出<div>的元素内直接使用无类、简单的元素。您可以尝试将其添加到每个图像中吗？
  • 如果你给图像布局会发生什么（例如使用zoom: 1CSS 属性）
  • 如果你给图像一个背景颜色会发生什么。
于 2009-12-15T02:23:46.997 回答
0

以下对我有用（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>
于 2009-12-15T02:53:14.237 回答