javascript - 使用 jQuery 让 div 更慢地过渡到新维度

Question

我认为 jsfiddle 会更好地说明问题：http: //jsfiddle.net/9mHk2/

我试图让包装 div 通过滑动/淡入/某些东西过渡到新的宽度，而不是卡入其中。

最简单的方法是什么？

<div style="border:1px solid #000000; padding:8px; float:right;">
    Here is a div with some text <span id="spn1">....</span>
</div>

<br /><br /><br />

<center>
    <input id="btn1" name="btn1" type="submit" value="Hide" />
</center>

$('#btn1').click(function (e) {
    e.preventDefault();
    $('#spn1').fadeOut('500');
});

Answer 1

似乎您想隐藏椭圆然后慢慢为矩形设置动画，对吗？您可以通过计算span隐藏之前和之后的宽度然后对其进行动画处理来做到这一点：

$('#btn1').click(function (e) {
    e.preventDefault();

    // Here's the width before the span is hidden
    var originalWidth = $('#rectangle').width();
    $('#spn1').hide();

    // Here's the width after the span is hidden
    var newWidth = $('#rectangle').width();

    // Now animate the difference!
    $('#rectangle').css('width',originalWidth).animate({width: newWidth}, 1200);
});

小提琴

Answer 2

这是与user1506980's 不同的方法，使用宽度动画隐藏跨度。需要一些额外的 CSS。

#spn1 {
    overflow: hidden;
    display: inline-block;
    margin: 0;
    padding:0;
    height: 1em;
}

$('#btn1').click(function (e) {
    e.preventDefault();
    $('#spn1').animate({width:0},500).fadeTo(500,0);
});

jsFiddle