jQuery animate doesn't work when i put easing

StackOverflow https://stackoverflow.com/questions/17748000

  •  03-06-2022
  •  | 
  •  

Frage

So this is my HTML with the jQuery

<!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>

Basically, I'm trying to make a lavalamp. The #box is the thing that will move over the a:hover. It works fine when i dont have the easing. But when i use easing, the animation doesn't work. And i have the easing file is the correct one, because I tested in another very simple animation.

I dont think the css will be needed, but just in case:

*{
    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;
}
War es hilfreich?

Lösung

You must include jquery.easing.1.3.js after jquery.min.js. Other than that, your code looks fine.

<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>

Andere Tipps

You are trying to refer to jQuery in the easing library before you have jQuery loaded. Place the easing script tag after the jQuery one.

For use the specialEasing you have to write the animate function in this way:

.animate( properties, options )

So your function animate became, more or less, like this:

.animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutElastic'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top