Question

所以这是我的带有jQuery的HTML

<!DOCTYPE html>
<html>
    <head>
        <title>SMIS StuCo</title>
        <link rel="stylesheet" href="css/style_pages.css" type="text/css"/>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var default_left = Math.round($("#selected").offset().left - $(".topnav").offset().left) + 20;
                $("#box").css({left: default_left});
                $("#selected a").css("color","black");

                $("#topnav li a").hover(function(){
                    $(this).css("color","black");
                    left = Math.round($(this).offset().left - $(".topnav").offset().left) + 20;
                    $("#box").stop(true,false).animate({left: left},1000,"easeOutElastic");
                    $("#selected a").css("color","#e3e3e3");
                    },function(){
                        $(this).css("color","#e3e3e3");
                        $("#selected a").css("color","black");
                        default_left = Math.round($("#selected").offset().left - $(".topnav").offset().left) + 20;
                        $("#box").stop(true, false).animate({left: default_left},1000,"easeOutElastic");
                });
            });
        </script>
    </head>

    <body>
        <div id="page_container" class="page_container">
            <nav class="topnav" id="topnav">
                <ul>
                    <li id="selected"><a href="">Home</a></li>
                    <li><a href="members.html">Members</a></li>
                    <li><a href="#">Bulletin</a></li>
                    <li><a href="#">Calendar</a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Links</a></li>
                    <li><a href="calc.html">Calculator</a></li>
                </ul>
                <div id="box"></div>
            </nav>
            <div id="output"></div>
        </div>
    </body>
</html>

基本上，我正在尝试制作一个lavalamp。 #box是将在a：hover上移动的东西。当我没有缓和时，它工作正常。但是当我使用缓动时，动画不起作用。我的缓动文件是正确的，因为我测试了另一个非常简单的动画。

我认为不需要css，但以防万一：

*{
    margin:0;
    padding:0;
}
body{
    background-color:#393939;
    font-family:"Myriad Pro";
}
div.page_container{
    margin:0px auto;
    width:940px;
    height:auto;
    background-color:#393939;
}
.topnav{
    display:block;
    position:relative;
    text-align:center;
    margin:0 50px;
    width:840px;
    height:40px;
    background-color:rgb(80,80,80);
}
.topnav ul{
    padding:0;
    margin:0;
    position:absolute;
    display:inline;
    left:0px;
    top:0px;
    z-index:100;
}
.topnav ul li{
    float:left;
    text-align:center;
    list-style-type:none;
    margin:0;
    padding:0;
    width:120px;
}
.topnav li a{
    display:block;
    padding:11px 0;
    color:#e3e3e3;
    text-decoration:none;
}
.topnav li a:hover{

}
.topnav #box{
    position:absolute;
    left:0;
    top:0;
    z-index:50;
    background:#ccc;
    height:20px;
    width:80px;
    margin-top:10px;
}
#output{
margin-top:50px;
color:white;
}

Answer 1

您必须在jquery.easing.1.3.js之后加入jquery.min.js。除此之外，您的代码看起来很好。

<link rel="stylesheet" href="css/style_pages.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>

Answer 2

在加载jQuery之前，你试图在缓动库中引用jQuery。将缓动脚本标记放在jQuery之后。

Answer 3

要使用specialEasing，您必须以这种方式编写animate函数：

.animate( properties, options )

所以你的函数动画或多或少变成了这样：

.animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutElastic'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

当我放宽容时，jQuery动画不起作用

3 个答案: