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

jQuery UI大小对悬停的影响然后返回原始大小

1 个答案: