JQuery одушевленные не работает, когда я ставлю ослабление

Так что это мой HTML с JQueryJQuery одушевленные не работает, когда я ставлю ослабление

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

источник

2013-07-19 dhk628

Добавить ослабление script после jquery scritpt – Musa

Можете ли вы настроить [jsFiddle] (http://jsfiddle.net), пожалуйста? –

Вы должны указать 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>

источник

2013-07-19 14:01:58 Mooseman

спасибо! supid me .... – dhk628

Нет проблем. Примите, пожалуйста, ответ, когда сможете. – Mooseman

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

источник

2013-07-19 14:01:43 Jnatalzia

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

.animate(properties, options)

Так что ваша функция одушевленные стали, более или менее, как это:

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

источник

2013-07-19 14:03:06 PaoloCargnin

JQuery одушевленные не работает, когда я ставлю ослабление

ответ

Смежные вопросы