Question

我试图让两个按钮在点击时滑动，然后将另一个按钮推出视口。例如：

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

点击蓝色 - [全蓝]

得到它？我完全设置了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);
    });
});

Answer 2

我不确定是否会设置左侧的新值，因此您可以使用position() function获取left容器#wrapper的值，然后计算新价值。

$(document).ready(function() {
    $('#wrapper_photo').click(function() {
        var leftVal = $('#wrapper').position().left - 380;
        $('#wrapper').animate({
            left:leftVal},
            5000);
    });
});

Animate功能无法正常工作

2 个答案: