Search code examples
jqueryfaderollover

Trouble with multiple rollover list items triggering image fades using jquery

I'm trying to get multiple rollover items that cause a single image to fade into several other potential images depending which rollover items are being triggered by the mouseover or hover event at that time. I've scoured stackoverflow and countless other tutorial sites and for some reason cant find a way to do this that works, at all. I've spent the whole day trying to get this to work and am just pulling my hair out at this point. Any help would be greatly appreciated!

I tried to modify the answer to this SO question: Smooth image fade out, change src, and fade in with jquery I mostly just changed the click event to a hover event and then duplicated the function for each rollover list item:

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#album01').hover(function() {
    $('#homeimg').fadeOut(500, function() {
        $(this).attr('src', 'photo01.jpg').bind('onreadystatechange load', function(){
            if (this.complete) $(this).fadeIn(500);
        });
    });
});
$('#album02').hover(function() {
    $('#homeimg').fadeOut(500, function() {
        $(this).attr('src', 'photo02.jpg').bind('onreadystatechange load', function(){
            if (this.complete) $(this).fadeIn(500);
        });
    });
});
$('#album03').hover(function() {
    $('#homeimg').fadeOut(500, function() {
        $(this).attr('src', 'photo03.jpg').bind('onreadystatechange load', function(){
            if (this.complete) $(this).fadeIn(500);
        });
    });
});
});
</script>
<body>
<div id="menu">
    <ul>
        <li id="album01"><a href="http://www.website.com/album01">album 3</a></li>
        <li id="album02"><a href="http://www.website.com/album02">album 2</a></li>
        <li id="album03"><a href="http://www.website.com/album03">album 2</a></li>
    </ul>
</div>
<div id="content">
    <img id="homeimg" src="images/home.jpg" alt="home"/>
</div>
</body>

and just in case there is something in my styling that is getting in the way I'll provide that as well:

a:link, a:active, a:visited {
display:block;
color: #000000;
text-decoration: none;
}
ul li a:hover {
display:block;
padding: 5px;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
#menu {
background: #FFFFFF;
width: 200px;
height 700px;
top: 50%;
padding: 0px 20px 450px 20px;
margin: -350px 0px 0px 0px;
overflow: auto;
position: fixed;
z-index: 2;
}
#content {
position: absolute;
height: 574px;
margin: -277px 0px 0px 0px;
padding: 0px 200px 0px 240px;
top: 50%;
overflow-x: hidden;
white-space: nowrap;

As far as I can tell this code should run fine, but nothing happens to the image in the #content div at all. What am I doing wrong?

Solution

  • jQuery .stop will help you.

    stop() stop the animation

    Remove margin: -350px 0 0; from css for #menu and try.