如何用動畫增加盒子的寬度？

Question

我想設置一個從20px到80px的框寬度動畫，但僅限框的右側。 所以這意味着當我將鼠標懸停在右側時，右側會增加60px的寬度。 它的jQuery代碼是什么？

Answer 1

僅使用CSS3和HTML。 無需使用jquery。

 .box { transition: 0.2s; width: 20px; height: 100px; background-color:#0066CC; position : absolute; left: 50px; top: 50px; } .box:hover { width: 80px; height: 100px; left: 50px; top: 50px; } 

 <div class="box"></div> 

Answer 2

這是使用jQuery的答案

HTML

<div id="container">
  <div id="animate" align="left">
  </div>
</div>

jQuery的

$("#animate").hover(function(){
$(this).animate({
width: "80px",
  }, 500 )
}, function(){
$(this).animate({
width: "20px",
  }, 500 )
});

檢查在： http : //jsfiddle.net/8nuoh4u4/