如何抽象JQuery動畫方法

Question

下面我有一個工作的例子，我做了jQuery動畫方法的抽象，它工作正常。但是，如果您注意到函數ani（）{}我硬編碼在DOM元素類中。我想用'this'關鍵字替換硬編碼的DOM元素，所以我可以在其他地方使用它。當我試圖做到這一點不起作用時，我試着用bind（）做實驗，但沒有做任何補救措施。下面

代碼： https://jsfiddle.net/u28fhf77/2/

---

$(".item").hover(function() { 

    ani("+=50", "+=50") 



}, function() { 

    ani("-=50", "-=50") 


}); 


function ani(val1, val2) { 
    var height = val1; 
    var width = val2 
    $(".item").animate({ // Hardcoded 'item' but want 'this' 
     height: height, 
     width: width 
    }, 200); 
} 

---

Answer 1

相當簡單通過添加元素一個額外的參數來轉換。

$(".item").hover(function() { 
    ani(this, "+=50", "+=50"); 

}, function() { 
    ani(this, "-=50", "-=50"); 

}); 


function ani(elem, val1, val2) {   
    $(elem).animate({ 
     height: val1, 
     width: val2 
    }, 200); 
} 

DEMO