JQuery анимация не работает, когда я ставлю ослабление

Так что это мой HTML с 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>

По сути, я пытаюсь приготовить лавалампу. #Box - это то, что будет перемещаться по элементу 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;
}
Источник

3 ответа

Решение

Вы должны включить 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>
Источник

Вы пытаетесь обратиться к jQuery в библиотеке замедления до того, как загрузите jQuery. Поместите тег сценария замедления после jQuery.

Источник

Для использования specialEasing вы должны написать функцию animate следующим образом:

.animate( properties, options )

Таким образом, ваша функция animate стала более или менее такой:

.animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutElastic'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
Источник
Другие вопросы по тегам