Jquery 使用动画功能更改Div左位置

我有三个分区和一个按钮

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

当有人点击该按钮时，子div left将为-20px并逐渐减小 它的宽度将增加，直到它的宽度变为主div的宽度，当再次单击按钮时，将发生相反的操作

---

我如何使用jquery动画函数来实现这一点。谢谢

我不知道你怎么选择你的按钮，但这样就可以了

$('#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});
    }
});

---

你可以看到它在工作。

谢谢你的回答，但我不了解的领域很少，比如var$child=$（“#child”）、state=$child.data（'state'）、orgWidth=$child.data（'orgWidth'）；这是未来使用的最佳实践，通过它，您可以在dom对象上保存相关数据，并在必要时使用它们。