Question

I am just starting to learn to use jQuery now, and I am experimenting with fading images in and out. I would like to fade an image to half opacity when I hover over it. Then, only after I remove my mouse of the image, the image reverts back to full opacity. Right now, I am using a callback function to fade the image back in, but it is performed immediately after the fade out occurs, not when my mouse leaves the image. Does anyone have some hints as to what is going on?

Here is my code:

$(document).ready(function(){
  $("img").mouseover(function(event){
    $(this).fadeTo("fast", 0.5, function(){
      $(this).fadeTo("fast", 1.0)}
    );
  });
});

Answer 1

Try this

$(document).ready(function(){
    $("img").on('mouseover', function(event){
        $(this).fadeTo("fast", 0.5);
    }).on('mouseout', function(){
       $(this).fadeTo("fast", 1.0)    
    });
});​

DEMO.