Question

根据我在Stack上找到的信息，我已经完成了以下操作，将我的div的高度从设定高度动画到自动高度和背面。

$('.parent').each(function(){
    $(this).data('height',$(this).css('height'));
    $(this).css('height','20px');
});
$('.parent').click(function(){
    var el = $(this);
    if ($(this).css('height') == '20px') {
        $(this).css({
            height: $(this).data('height'),
            cursor: 'auto'
        });
        $(this).children('.closeButton').fadeIn();
    }
});
$('.closeButton').click(function(){
    var el = $(this).parent();
    var button = $(this);
    el.css('height','0');
    setTimeout(function(){
        el.css({
            height: '20px',
            cursor: 'pointer'
        });
        button.fadeOut();
    },150);
});
$('.makeBigger').click(function(){
   html = 'TONS OF CONTENT MAKES ME BIGGER<br/>TONS OF CONTENT MAKES ME BIGGER<br/>TONS OF CONTENT MAKES ME BIGGER<br/>';
   $('#bigger').append(html);
   $('#bigger').css('height','auto');
});

元素的HTML是无形的：

<div class="parent">
    <div class="closeButton">close</div>
    CONTENT
</div>

<div class="parent" id="bigger">
    <div class="closeButton">close</div>
    CONTENT
    <div class="makeBigger">EVEN BIGGER</div>
</div>

CSS：

.parent {
    background: red;
    overflow: hidden;
    cursor: pointer;
   margin: 30px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
}
.closeButton {
    display: none;
    cursor: pointer;
    float: right;
}

http://jsfiddle.net/3uFaq/

这很好用。但是我的一个div包含一些用户可以与之交互的表单字段，然后将更多数据附加到该div。我怎样才能进一步激活该div以使其更具动画效果？我已经尝试过使用max-min height和stuff进行广泛的游戏，并且没有找到合适的脚本组合。

jQuery / CSS Transition：三个变量高度之间的动画，1表示自动

0 个答案: