jquery - Changing background image of page by hovering over buttons -

jquery - Changing background image of page by hovering over buttons -

this got far: fiddle. i've got background want alter different image when hover on button (and there 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 there! works single button. not much two. main issue can't prepare getting background images fade each other, not "nothing" , back. not sure happening when add together link.

these guys have done want, don't have mettle figure out how did it.

change fades animate , set queue false run in parallel:

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

jquery fade cross-fade