Question

当使用带有动画的show时，如果我显示的元素中包含的任何元素都有尺寸 - 在动画显示之前，dom似乎弹出以为完全展开的元素腾出空间。

<div id="container" style="border: thin solid black; width: 200px; height: 200px;">
    <div style="display: none; border: thin solid red;" id="expander">
        <div style="width: 200px; height: 100px; border: thin solid blue;">
            Test
        </div>
    </div>

    <input type="button" id="expander_button" value="test">
</div>

<script>
$(document).ready(function(){
    $("#expander_button").click(function(){
        if($("#expander").is(':visible')){
            $("#expander").hide();
        }
        else{
            $("#expander").show('scale', { percent: 100, origin: [ 'top', 'right' ] }, 1500);
        }
    });
});
</script>

有没有办法让元素“围绕”以动画的速度进行缩放？所以在上面的jsfiddle中，测试按钮会被慢慢“推开”而不是弹开以为整个动画腾出空间，类似于slideToggle的做法。

Answer 1

正如@Boaz建议的那样，这需要使用.animate()而不是.show ......

$("#expander").animate({height:'show',width:'show'}, 1500);

...以及一些CSS调整，以确保您的元素定位和按需扩展。具体来说，在按钮之前向float:right DIV添加#expander以及在其下方添加明确修复DIV，以确保按钮在DIV展开时平稳地向下移动。

工作jsFiddle，来自你的，在这里：http://jsfiddle.net/vkf9j/

jQuery show - ＆＃34; push＆＃34;内容以动画的速度

1 个答案: