Changing background image of page by hovering over buttons

Question

This is what I got so far: fiddle. I've got a background that I want to change to a different image when I hover over a button (and there will be several buttons, several images).

$(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;}

I'm almost there! It works perfectly with a single button. Not so much with two. The main issue I can't fix is getting the background images to fade to each other, not to "nothing" and then back. Also not sure what is happening when I add another link.

These guys have done exactly what I want, but I don't have the mettle to figure out HOW they did it.

Answer 1

Change your fades to animate and set queue to false so they run in parallel:

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