-1

出于某种原因，我似乎无法让 .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 部分隐藏，然后 onmouseover 展开。

4

2 回答 2

3

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

缓和

.animate() 的剩余参数是一个字符串，用于命名要使用的缓动函数。缓动函数指定动画在动画中不同点的进展速度。jQuery 库中唯一的缓动实现是默认的，称为摇摆，以及以恒定速度进行的一种，称为线性。使用插件可以使用更多的缓动功能，尤其是 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'})
        });

    });
于 2011-04-15T20:01:21.373 回答
0

jQuery 中的$('#control-over')选择器将在您的 html 中搜索具有id的元素control-over，例如<div id="control-over">. 从您的代码示例中，您似乎有一个名为control-over. 两者不一样。

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

于 2011-04-15T17:49:47.113 回答