提问者:小点点

full动画不能在jQuery中使用2个动画


我有这个密码。当鼠标悬停在炸弹上时,爆炸动画不能完全播放,如果我移除,那么“走向你的光标”动画就不能工作。

如果有人能解决这个问题,我们将不胜感激。

null

$(document).ready(function() { //goes towards your cursor
  $("body").mousemove(function(e) {
    $("#bomb").stop();
    handleMouseMove(e);
  });

  function handleMouseMove(event) {
    var x = event.pageX,
      y = event.pageY;

    $("#bomb").animate({
      left: x,
      top: y
    }, 50);
  }

  $("#bomb").mouseover(function() { //explosion animation
    $("#bomb").animate({
      backgroundColor: '#ff4500', //using jquery colour plugin
      height: "100px",
      width: "100px",
    }, "fast");
    $("#bomb").fadeOut("slow");
  });
});
html,
body {
  height: 100%;
  margin: 0px;
}

#bomb {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-git.js"></script>
<center>
  <div id="bomb"></div>
</center>

null


共1个答案

匿名用户

请检查以下各项是否正常:

null

$(document).ready(function() { //goes towards your cursor
  $("body").mousemove(function(e) {
//    $("#bomb").stop();
    handleMouseMove(e);
  });

  function handleMouseMove(event) {
    var x = event.pageX,
      y = event.pageY;

    $("#bomb").animate({
      left: x,
      top: y
    }, 50);
  }

  $("#bomb").mouseover(function() { //explosion animation
    $("#bomb").animate({
      backgroundColor: '#ff4500', //using jquery colour plugin
      height: "100px",
      width: "100px",
    }, "fast");
    $("#bomb").fadeOut("slow");
  });
});
html,
body {
  height: 100%;
  margin: 0px;
}

#bomb {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-git.js"></script>
<center>
  <div id="bomb"></div>
</center>