使用动画功能改变Div的左位置

Question

我有3个div's &一个按钮

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

当有人点击按钮，那么子div左将是-20px和逐渐它的宽度将增加，直到它的宽度成为主div的宽度，当再次点击按钮时，相反的动作将发生。

我怎么能做到这一点使用jquery动画功能。由于

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});
    }
});