悬停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