JQuery 动画不工作

Question

由于某种原因，我似乎无法让 .animate 正常运行。有人能看出为什么吗？

我正在用这个 一个容器 div...

#valve-menu {
    position: absolute;
    width: 780px;
    top: 200px;
    background-color: #9C3;
    margin-right: 9px;
    margin-left: 10px;
}

然后...

#control-cover{
    height: 50px;
    width: 180px;
    overflow: hidden;
    position: absolute;
    }
#control{
    background-color: #0C9;
    height: 200px;
    width: 180px;
    margin-right: 10px;
    position: absolute;
    }

我的 Jquery 是这样的，

$(document).ready(function(){

    //When mouse rolls over
    $("#control-cover").mouseover(function(){
        $(this).stop()
               .animate({height:'150px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("#control-cover").mouseout(function(){
        $(this).stop()
               .animate({height:'50px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

我想让控件 div 部分隐藏，然后在鼠标悬停时展开。

Answer 1

这是有效的。如果您不使用 Easing 插件，则默认情况下 jQuery Swing 和 Linear 中只有两个可用：
来自 jQuery 网站 http://api.jquery.com/animate/

宽松

.animate() 的剩余参数
是一个命名缓动函数的字符串
使用。缓动函数指定
动画的速度
在不同的点上取得进展
动画。唯一的缓和
jQuery 库中的实现
是默认值，称为 swing，还有一个
以恒定的速度进步，
称为线性。更多缓动功能
可以使用
插件，尤其是 jQuery UI
套房。

    $(document).ready(function(){

        //When mouse rolls over
        $("#control-cover").bind('mouseover mouseenter',function(){
            $(this).stop()
            .animate({height:'150px'},
            {queue:false, duration:600, easing: 'swing'})
        });

        //When mouse is removed
        $("#control-cover").bind('mouseout mouseleave',function(){
            $(this).stop().animate({height:'50px'},
            {queue:false, duration:600, easing: 'swing'})
        });

    });

Answer 2

jQuery 中的 $('#control-over') 选择器将在 html 中搜索 id 为 control-over 的元素，例如

。从您的代码示例来看，您似乎有一个名为 control-over 的 CSS class。两者并不相同。

您需要将 id= 属性添加到 html 元素，或者按类名称搜索元素，例如 $('.control-over')。