如何用动画增加框宽？

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/