圖像懸停動畫

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

});