懸停jQuery UI的尺寸效應，然後返回到原來的大小

Question

我仍然在學習JavaScript，jQuery和jQuery UI的和我想要做一些事情，似乎很簡單：

做一個灰格箱擴大到一懸停時尺寸更大並且保持處於懸停狀態時的新尺寸，只有只有在您移開鼠標時恢復原始尺寸。

這裏是我的代碼：

$("div").hover(
// Mouse Over: Expand to 75 x 75 
    function(){ 
    $(this).effect("size", { to: {width: 75,height: 75} }, 1000); 
    }, 
    // Mouse Out: 50 x 50 is original size 
    function(){ 
    $(this).effect("size", { to: {width: 50,height: 50} }, 500); 
}); 

我知道我很接近，但它並不完全工作的權利。在這裏看到我的小提琴http://jsfiddle.net/L496W/1/。箱子擴大到更大的尺寸，但隨後仍然在其上徘徊而縮回。

我在做什麼錯？

此外，將.toggle（）幫助我嗎？

謝謝！

Answer 1

使用jQuery的.animate()方法。

$("div").hover(
    // Mouse Over 
    function(){ 
    $(this).animate({width: 75,height: 75}, 1000); 
    }, 
    // Mouse Out 
    function(){ 
     $(this).animate({width: 50,height: 50}, 1000); 
}); 

jsfiddle