Trouble with multiple rollover list items triggering image fades using jquery

Question

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?

Dipesh Parmar · Accepted Answer · 2013-02-18T08:34:51.713

1

jQuery .stop will help you.

stop() stop the animation

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

edited Feb 18 '13 at 08:34

answered Feb 18 '13 at 08:27

Dipesh Parmar

27,090
8
61
90

your code is working as needed just div was behind #content div so it wasnt shown so remove #menu css solved it at my side. – Dipesh Parmar Feb 18 '13 at 08:38
Thanks for the quick response! It actually works fine with the negative margin. I realized that I also had an id labeled as a class by accident, which was the main reason it wasn't working. I will "check" your answer though because I did end up needing something that would take the user back to the original image after the rollover effect, although I didn't use `.stop()` but something similar. – RasterEyes Feb 21 '13 at 21:29

Trouble with multiple rollover list items triggering image fades using jquery

1 Answers1