1

这就是我到目前为止得到的：fiddle。我有一个背景，当我将鼠标悬停在一个按钮上时，我想将其更改为不同的图像（并且会有几个按钮，几个图像）。

$(document).ready(function(){ 
    $("#leo_land3_div").hover(function() {
        $("#fish").stop().fadeOut("fast", function() {
            $("#fish").css("background-image", "url('http://i.imgur.com/a0HBqz3.jpg')").fadeIn(700);
        });
    }, function() {
        $("#fish").stop().fadeOut("fast", function() {
            $("#fish").css("background-image", "url('http://i.imgur.com/lJ7Zmi7.jpg')").fadeIn(700);
        });
    });
    });

$(document).ready(function(){ 
    $("#leo_land3_div2").hover(function() {
        $("#fish").stop().fadeOut("fast", function() {
            $("#fish").css("background-image", "url('http://i.imgur.com/ThRxyIM.jpg')").fadeIn(700);
        });
    }, function() {
        $("#fish").stop().fadeOut("fast", function() {
            $("#fish").css("background-image", "url('http://i.imgur.com/lJ7Zmi7.jpg')").fadeIn(700);
        });
    });
    });

HTML：

HTML:

<div id="fish">
<div id="leo_land3_div"><a href="#">TTT</a> </div>
<div id="leo_land3_div2"><a href="#">TTT 3</a> </div>    
</div>

CSS：

#fish{background-image:url("http://i.imgur.com/lJ7Zmi7.jpg");width:459px;height:474px;}

我快到了！只需一个按钮即可完美运行。没有那么多，有两个。我无法解决的主要问题是让背景图像相互褪色，而不是“无”然后又回来。也不确定当我添加另一个链接时发生了什么。

这些家伙完全按照我的意愿做了，但我没有勇气弄清楚他们是如何做到的。

4

1 回答 1

1

将淡入淡出更改为animate并设置queue为 false，以便它们并行运行：

.animate(
    { opacity: 0 },
    { queue: false, duration: 'slow' }
  )
于 2014-06-26T18:42:30.417 回答