html - CSS +/- x 像素用于宽度和高度动画

Question

有没有什么方法可以让 div 动起来(最好不用 JavaScript)，让它的宽度/高度增加或减少 5px？我并不是说使用 scale(0.95) 或 zoom: 95% 因为这取决于 div 的原始大小，并且我希望始终精确更改 5px。

Answer 1

没有 jQuery

• 要求 div 的高度增量是已知的，而不是假设的。

div.growable {
    background: red;
   color: white;
   -webkit-transition: height 200ms ease-in-out;
   height: 100px;
}
div.growable:hover {
   height: 105px;
}

Fiddle : http://jsfiddle.net/Xh4vC/

使用 jQuery

• 允许将高度更改为现有值的增量或减量，而不关心该值是什么。

$(function(){
    $('#growDiv').click(function(){
        $('div.growable-js').animate({'height' :'+=5px'}, 200);
    });
   $('#shrinkDiv').click(function(){
       $('div.growable-js').animate({'height': '-=5px'}, 200);
    });
});

Fiddle : http://jsfiddle.net/Xh4vC/