Search code examples
jqueryfadeinfadefadeout

Why is the second fade in not working?

I'm trying to fade one image to second on mouse enter and reverse on mouse leave. The effect I want can be found at http://mango.com any of their product images. Here's the script below.

<div id="fade">
    <img src="two.gif" width="100" height="100" id="two1" class="after" style="display:none;"/>
    <img src="one.gif" width="100" height="100" id="one1" class="before" />
</div>
<div id="fade">
    <img src="two.gif" width="100" height="100" id="two2" class="after" style="display:none;" />
    <img src="one.gif" width="100" height="100" id="one2" class="before" style="" />
</div>
<script type="text/javascript">
$('#one1,#one2').mouseenter(function(){
    $(this).fadeOut(500);
    $(this).prev('img').fadeIn(500);
});
$('#two1,#two2').mouseleave(function(){
    $(this).fadeOut(500);
    $(this).prev('img').fadeIn(500);
});
</script>

It fades once but next time both images disappear. Please can anyone post the code or give reference to any code/plugin that works the same.

Solution

  • Where you have

    $('#two1,#two2').mouseleave(function(){
$(this).fadeOut(500);
$(this).prev('img').fadeIn(500);
});

    You should have 

    $('#two1,#two2').mouseleave(function(){
$(this).fadeOut(500);
$(this).next('img').fadeIn(500);
});

    You've just forgotten to switch "next" for "prev" on the mouseleave.