image hover animé

Question

J'ai le script jQuery suivant qui fait un effet de transparence transparent orange couvrir l'image quand il est renversé. Comment puis-je faire si ce script animer et sortir (avec un fondu?)

$(document).ready(function() { 

    $('#gallery a').bind('mouseover', function(){ 
     $(this).parent('li').css({position:'relative'}); 
     var img = $(this).children('img'); 
     $('<div />').text(' ').css({ 
      'height': img.height(), 
      'width': img.width(), 
      'background-color': 'orange', 
      'position': 'absolute', 
      'top': 0, 
      'left': 0, 
      'opacity': 0.5 
     }).bind('mouseout', function(){ 
      $(this).remove(); 
     }).insertAfter(this); 
    }); 

}); 

Answer 1

essayer ..

$(document).ready(function() { 

    $('#gallery a').bind('mouseover', function(){ 
     $(this).parent('li').css({position:'relative'}); 
     var img = $(this).children('img'); 
     $('<div />').text(' ').css({ 
      'height': img.height(), 
      'width': img.width(), 
      'background-color': 'orange', 
      'position': 'absolute', 
      'top': 0, 
      'left': 0, 
      'opacity': 0.5 
     }).bind('mouseout', function(){ 
      $(this).fadeOut(function(){ $(this).remove(); }); // <--- added fadeout() 
     }).insertAfter(this).fadein(); // <--- added fadeIn() 
    }); 

});