item changing with fade in/out (jQuery)

Question

I want to create a menu in my web page, where each list item is represented by image. When mouse point at some of these images, this image should fade out and be replaced by another image (I think fadeIn() would be useful).

HTML code:

<ul id="buttons">`    
    <li><a href="#" onmouseover="change(1)" onmouseout="ret(1)">  
        <img src="button01.png" id="button01_1" />
        <img src="button01_hover.png" id="button01_2"/>  
    </a></li>
    <li><a href="#" onmouseover="change(2)" onmouseout="ret(2)">  
        <img src="button02.png" id="button02_1" />
        <img src="button02_hover.png" id="button02_2"/>  
     </a></li>
</ul>

jQuery - I´m new in using jQuery, I tried this, but there are many mistakes. Pictures are not changing properly - "fadeIn" picture changes position (every list item is absolutely positioned), and first image is disapperaing and appearing constantly. Here´s the code:

function change(i)
{
    switch(i)
    {
        case 1:
            $("#button01_1").fadeOut(500); 
            $("#button01_2").fadeIn(500); 
            break;
        case 2:
            $("#button02_1").fadeOut(500);
            $("#button02_2").fadeIn(500);
    }
}

(ret(i) is similar..)

Thanks for help..

Answer 1

You're nearly there but i can simplify:

<ul id="buttons">
    <li>
        <a href="#" id="link1">
            <img src="button01.png" id="button01_1" />
        </a>
    </li>
    <li>
        <a href="#" id="link2">
            <img src="button02.png" id="button02_1" />
        </a>
    </li>
</ul>

jQuery code:

$('#link1').hover(function(){
    $('#button01_1').fadeOut(500).attr('src','button01_hover.png').fadeIn(500);
},function(){
    $('#button01_1').fadeOut(500).attr('src','button01.png').fadeIn(500);
});

With the selectors you could remove the id button01_1 and replace the jQuery selector to $('img','#link') to accommodate. sorry if I've used too much of the jQuery library than javascript.

Function explained:

$('#link1').hover(function(){ --initial function on hover-- },function(){ --coming out of the hover-- });

EDIT :

jQuery library : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Add the library to your html page

Answer 2

I think the problem is the fact that fading out an image also triggers a mouseout, (since it has display:none once the fade out completes), which in turn triggers a fade in, and so on. Consider rethinking your logic.

Answer 3

Updated:
use like this :

<ul id="buttons">    
    <li><a href="#" onmouseover="change($(this),1)" onmouseout="ret($(this),1)">  
        <img src="button01.png"/> 
    </a></li>
    <li><a href="#" onmouseover="change($(this),2)" onmouseout="ret($(this),2)">  
        <img src="button02.png"/> 
     </a></li>
</ul>  

jquery :

function change(elem ,i){
   $(elem).find('img').fadeOut('500',function(){
      $(this).attr('src','button0'+i+'_hover.png').fadeIn('2000');
   });
}
function ret(elem ,i){
   $(elem).find('img').fadeOut('500',function(){
       $(this).attr('src','button0'+i+'.png').fadeIn('2000');
   });
}

I hope that work ...