Question

我的jquery脚本是

<script>
$(document).ready(function () {

  $("#tt").mouseover(function () {
    $("#aa").animate({
      padding: "5px 0 5px 100px",
      backgroundColor: "#7EEFF7",
    });
  });

  $("#tt").mouseout(function () {
    $("#aa").animate({
      padding: "0"
    });
  });

});
</script>

我的HTML代码就像这样

<li id="tt">
  <a id="aa" href="<?php echo base_url() . 'new_user'; ?>">New User</a>
</li>

在浏览器中，当我将鼠标移到它上面时，它不止一次动画。为什么会这样？

Answer 1

在开始新动画之前，您必须使用.stop()来清除动画队列。

尝试，

$(document).ready(function () {

  $("#tt").mouseover(function () {
    $("#aa").stop().animate({
      padding: "5px 0 5px 100px",
      backgroundColor: "#7EEFF7",
    });
  });

  $("#tt").mouseout(function () {
    $("#aa").stop().animate({
      padding: "0"
    });
  });

});

Answer 2

您的代码没有任何问题。当鼠标进入ID为#tt的DOM时，您只需将动画开始。

在这种情况下，如果#tt没有WIDTH，您可以在空格中鼠标翻转。对鼠标进行3次以上的测试。 jQuery将运行动画3次。

解决方案：在#tt中添加css宽度。它将按照您的意愿工作，或者像Rajaprabhu提到的那样使用停止。

Answer 3

您可以在动画功能中使用complete：function（），这样当动画完成后返回原始值

<script>
$(document).ready(function () {
    $( "#tt" ).mouseover(function() {
        $( "#aa" ).animate({
            padding: "5px 0 5px 100px",
            backgroundColor: "#7EEFF7",
        }, {
            complete: function() {
            $( "#aa" ).css("padding","0px");
        }
        });
    });
});
</script>

jquery动画未按预期工作

3 个答案: