Question

这是我到目前为止所得到的：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;}

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

These guys完全符合我的要求，但我没有勇气弄清楚他们是如何做到的。

Answer 1

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

.animate(
    { opacity: 0 },
    { queue: false, duration: 'slow' }
  )

通过将鼠标悬停在按钮上来更改页面的背景图像

1 个答案: