使用动画功能更改div左侧位置

Question

我有 3 个 div 和一个按钮

<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。