jQuery - 使用緩動插件調整圖像效果

Question

我在模擬效果，如http://www.templatemonster.com/flash-templates/27545.html（當您嘗試將鼠標懸停在縮略圖上時）。

進出口使用jQuery和寬鬆插件，這是我到目前爲止有：http://jsfiddle.net/RtYMV/

JS：

$(document).ready(function() { 
    $('.line a').hover(
     function() { 
      $(this).find('img').stop().animate({ 
       width: '88px', 
       height: '88px', 
       top: '6px', 
       left: '6px', 
       easing: 'easeInBounce'}, 111); 
     }, 
     function() { 
      $(this).find('img').stop().animate({ 
       width: '100px', 
       height: '100px', 
       top: '0', 
       left: '0', 
       easing: 'easeOutBounce'}, 111); 
    }); 
}); 

但很明顯，我有一個運行寬鬆插件問題。

Answer 1

的.animate()功能可以同時接收各個參數對於每個選項或兩個對象映射參數，所述第一指示的CSS屬性和第二對屬性的其餘部分，所以，您的代碼應該是這樣的：

$(document).ready(function() { 
    $('.line a').hover(
     function() { 
      $(this).find('img').stop().animate({ 
       width: '88px', 
       height: '88px', 
       top: '6px', 
       left: '6px'}, 
       {easing: 'easeInBounce',duration: 111}); 
     }, 
     function() { 
      $(this).find('img').stop().animate({ 
       width: '100px', 
       height: '100px', 
       top: '0', 
       left: '0'}, 
       {easing: 'easeOutBounce',duration: 111}); 
    }); 
}); 

此外，您沒有在jsfiddle中包含jquery easing插件（在側欄的「管理資源」部分中執行此操作）。

看到工作demo