我有这个密码。当鼠标悬停在炸弹上时,爆炸动画不能完全播放,如果我移除,那么“走向你的光标”动画就不能工作。
如果有人能解决这个问题,我们将不胜感激。
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
请检查以下各项是否正常:
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>