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，然后onmouseover expand。

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的元素，例如<div id="control-over">。从您的代码示例中，您看起来有一个名为control-over的CSS 类。两者不一样。

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

JQuery Animate无法正常工作

2 个答案: