jquery - 悬停时的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);
});

我知道我很接近，但它并不完全正确。在这里查看我的小提琴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