Question

我在jQuery中使用.animate函数时遇到了麻烦，并将其与缓动混合。

以下作品;

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

});

但这不是;

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

});

我不确定我做错了什么，这将是一件非常明显的事情，但我之前从未使用过缓动或jQueryUI，所以我很丢失！

编辑：我在这里引用jQueryUI;

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

Answer 1

您的代码似乎运行正常。

确保您已下载包含此效果的jQuery-UI。在此处的效果下查看：http://jqueryui.com/download/

Answer 2

我的代码与你的代码匹配，希望它对你有帮助。

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

jQuery .animate缓解问题

2 个答案: