이미지 호버 애니메이션 처리

Question

다음과 같은 jQuery 스크립트를 사용하여 롤오버했을 때 주황색 투명 호버 효과로 이미지를 덮어 씁니다. 어떻게 (페이드로?) 그렇게이 스크립트에서 아웃 애니메이션 것입니다해야합니까

$(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

시도 ..

$(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() 
    }); 

});