2013-05-14 3 views
0

У меня возникла проблема с .animate функцией в jQuery и смешением с ослаблением.Проблемы с jQuery .animate easing

Следующие работы;

$("#PanelOne").mouseover(function() { 
     $("#PanelTwo").stop(true, false).animate({ marginLeft: "420px"}, 150); 

}); 

Но это не так;

$("#PanelOne").mouseover(function() { 
     $("#PanelTwo").stop(true, false).animate({ marginLeft: "420px"}, 150, 'easeOutQuint'); 

}); 

Я не знаю точно, что я делаю неправильно, это будет что-то стало очевидным, но я никогда не использовал ослабление или jQueryUI раньше, так что я довольно потерял!

EDIT: Я ссылаюсь на jQueryUI здесь;

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js

+0

Вы включили эффекты в Jquery UI? http://jqueryui.com/download/ – Yeronimo

+0

Из документов: «Единственные облегчающие реализации в библиотеке jQuery - это по умолчанию, называемые swing, и один, который прогрессирует с постоянным темпом, называемый линейным. Дополнительные функции ослабления доступны с помощью использование плагинов, в первую очередь набор jQuery UI. " – j08691

+0

Работы здесь: http://jsfiddle.net/4vCjn/ –

ответ

0

Ваш код, кажется, работает нормально.

Убедитесь, что вы загрузили jQuery-UI с включенным эффектом. Проверьте это под эффекты здесь: http://jqueryui.com/download/

+0

Да, теперь я вижу, как это поможет! –

+0

Я ссылался на библиотеку из Google, но должен был иметь неправильный адрес, я не ссылаюсь на него с jQueryui.com, и он отлично работает. Благодаря! –

+0

Рад, что это вам помогло. – Broxzier

0

У меня есть код Совпадение С уважением, надеюсь, что будет полезно для U ..

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; } 
    div.colored { background:green; } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
    <div id="PanelOne"><img src="http://www.clipartguide.com/_small/0808-0710-1516-1324.jpg" width="85px" height="81px"></div> 
    <div id="mover"><img src="http://www.alissweettreats.com/i//Smiley_Face.jpg" width="85px" height="81px"></div> 
    <div><img src="download2.jpg" width="85px" height="81px"></div> 
<script> 

    $("#run").click(function(){ 
     $("div:animated").toggleClass("colored"); 
    }); 
    function animateIt() { 
     $("#mover").slideToggle("slow", animateIt); 
    } 
    animateIt(); 

    $("#PanelOne").mouseover(function() { 
    alert('Its Working'); 
     $("#mover").stop(true, false).animate({ marginLeft: "420px"}, 150, "easeOutQuint"); 
     }); 
</script> 

</body> 
</html>