动画功能不起作用

Animate feature not working

本文关键字：不起作用 功能 动画      更新时间：2023-09-26

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

点击前-[蓝色|灰色]

点击蓝色-[全部蓝色]

明白了吗？我已经完美地设置了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>

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

到此为止：DEMO

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

我不确定是否会为left设置这个新值，所以可以使用position()函数来获取#wrapper容器的left的值，然后计算新值。

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