使用动画功能划分左侧位置变化

Question

我有3个div＆amp;一键

<div id="Outer">
<div id="main" style='height:200px;width:300px'/>
<div id="child" style='height:20px;'/>
</div>

当有人点击按钮时，剩下的子div将是-20px并逐渐变为 它的宽度将增加，直到其宽度变为主div的宽度，再次点击按钮时，将发生反向动作。

我怎么能用jquery animate函数做到这一点。感谢

Answer 1

我不知道你如何选择你的按钮，但这样做会有效;

$('#yourButtonId').click(function() {
    var $child = $('#child'),
        state = $child.data('state'),
        orgWidth = $child.data('orgWidth');
    if(!orgWidth) {
        $child.data('orgWidth', $child.width());
    }
    if(state != 'big') {
        $child
            .data('state', 'big')
            .animate({left:"-=20px",width:$('#main').width()});
    }
    else {
        $child
            .data('state', 'normal')
            .animate({left:"+=20px",width:orgWidth});
    }
});

您可以看到它正常工作here。