使用jquery动画方法在容器div周围移动box div
我是一名学生，不熟悉jquery动画，尝试执行方向动画，其中每个方向都有一个对应的按钮，当单击任何按钮时，上一个动画停止。我也不希望较小的div离开较大的div，无论单击哪个按钮方向。我已经设置HTML和CSS如下 HTML使用jquery动画方法在容器div周围移动box div,jquery,html,css,jquery-animate,Jquery,Html,Css,Jquery Animate,我是一名学生，不熟悉jquery动画，尝试执行方向动画，其中每个方向都有一个对应的按钮，当单击任何按钮时，上一个动画停止。我也不希望较小的div离开较大的div，无论单击哪个按钮方向。我已经设置HTML和CSS如下 HTML <!DOCTYPE html> <html> <head> <title> Animation </title>
<!DOCTYPE html>
<html>
<head>
<title>
Animation
</title>
<link rel="stylesheet" type="text/css" href="animate.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="animate.js"></script>
</head>
<body>
<header>
<h1>Animation in jQuery</h1>
</header>
<div id="btnPanel">
<button id="button1">Up</button>
<button id="button2">Down</button>
<button id="button3">Left</button>
<button id="button4">Right</button>
<button id="button5">FadeOut</button>
<button id="button6">FadeIn</button>
<button id="button7">Blink</button>
<button id="button8">Reset</button>
</div>
<div id="container">
<div id="box">
</div>
</div>
</body>
</html>
$(function MoveBox() {
$("#button1").on("click", function MoveBox() {
$("#box").animate({
top: 150
}, 1500)
});
$("#button2").on("click", function MoveBox() {
$("#box").animate({
bottom: 150
}, 1500)
});
$("#button3").on("click", function MoveBox() {
$("#box").animate({
right: 150
}, 1500)
});
$("#button4").on("click", function MoveBox() {
$("#box").animate({
left: 150
}, 1500)
});
});
我已经在每个动画方法中乱弄了几个小时的数字，到目前为止，右转似乎是唯一一个按预期工作的方法，向下的方向使框在容器外缩放，向左转到其他方向，或者根本不工作。是否有人能在代码中显示或解释使所有四个方向更顺利工作的最佳方法。我以前没有做过很多像素数学 这可能无法完全回答您的问题，但可能有助于为您指明正确的方向。我把两个例子放在一起，说明你如何实现（我认为）你的要求 第一个（）使用if/else语句将操作应用于每个按钮
$（'button'）。在（'click'，function（）上{
如果（$（this.attr（'id'）==='button1'）{…}
});
$（'#button1'）。在（'click'，function（）{…}）上；
“$(function MoveBox() {
$("#button1").on("click", function MoveBox() {
$("#box").animate({
top: 150
}, 1500)
});
$("#button2").on("click", function MoveBox() {
$("#box").animate({
bottom: 150
}, 1500)
});
$("#button3").on("click", function MoveBox() {
$("#box").animate({
right: 150
}, 1500)
});
$("#button4").on("click", function MoveBox() {
$("#box").animate({
left: 150
}, 1500)
});
});