悬停时 jQuery UI 尺寸效果然后返回原始尺寸

Question

我仍在学习 javascript、jQuery 和 jQuery UI，并且我正在尝试做一些看似简单的事情:

使灰色 div 框在悬停时展开到更大的尺寸，并在悬停时保持新尺寸，并且仅在您将鼠标移开时返回原始尺寸。

这是我的代码:

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

我知道我已经很接近了，但效果不太好。在这里查看我的 fiddle 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