动画功能不起作用

Posted 2023-05-08

【中文标题】动画功能不起作用

【英文标题】：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>

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

【参考方案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);
    );
);