动画功能不起作用答案

【问题标题】：Animate feature not working动画功能不起作用
【发布时间】：2014-11-17 00:03:49
【问题描述】：

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

点击前 - [ 蓝色 |灰色]

点击蓝色 - [全蓝色]

明白了吗？我有完美的 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>

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

【问题讨论】：

标签： javascript jquery html position jquery-animate

【解决方案1】：

给你：DEMO

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

【讨论】：

在小提琴上效果很好，但是当我将所有内容上传到我的网站时，什么都没有。有什么想法吗？
您是否正确包含了 jQuery 库？您是否将代码包装在文档就绪函数中？
我将代码包装在一个准备好的函数中，如果该库正确包含在 HTML 中，它应该可以工作
呃，我不确定。这段代码 [] 会正确链接它还是我完全错过了什么？是的，我将它包装在一个文档就绪函数中。
不，您需要从此链接 (jquery.com/download) 下载 jQuery 库，然后将其包含到您的 HTML 中

【解决方案2】：

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

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

【讨论】：