javascript - 动画功能不起作用

Question

我正在尝试制作两个按钮，单击时会滑动并将另一个按钮推出视口(viewport)。例如:

点击之前 - [ 蓝色 |灰色]

点击蓝色 - [全蓝色]

明白了吗？我已经完美地设置了 html 和 css(我认为)，但我无法让这个 jQuery 代码产生动画效果并更改包含两个按钮的元素的位置。这让我抓狂。到目前为止我所拥有的是:

<div id='container'>
    <div id='wrapper'>
        <a id='wrapper_photo' href=""></a>
        <a id='wrapper_video' href=""></a>
    </div>
</div>
<style>
    #container{
        width:760px;
        height:25px;
        background:#000000;
        overflow:hidden;
    }

    #wrapper {
        width:1520px;
        height:25px;
        background-color:#0F0;
        position:relative;
        left:-380px;
    }

    #wrapper_photo{
        width:760px;
        height:25px;
        background-color:#666666;
        float:left;
    }

    #wrapper_video {
        width:760px;
        height:25px;
        background-color:#0000CC;
        float:left;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        $('#wrapper_photo').click(function() {
            $('#wrapper').animate({
                left:"-=380"},
            5000);
        });
     });
</script>

当我无法让左侧工作时，我就停下来了。

Answer 1

给你: DEMO

$(function(){
    $('#wrapper_photo, #wrapper_video').click(function() {
        $(this).animate({
            width:"100%"},
            5000);
        $(this).siblings('a').animate({
            width:'0px'
        },5000);
    });
});