首先,这不是一个新问题——我只是在引用 Stack Overflow 上已经提出的另一个问题:
Bouncing ball 5 times jquery/javascript beginners level
在那个问题中,动画在弹跳 5 次时运行良好,但当我尝试弹跳超过 5 次或少于 5 次时,似乎无法正常工作。
在紧急情况下,这里是片段:
$(function() {
var time = 500;
var bounces = 8;
var top_bounce = 20;
function bounceDown() {
$("#ball").animate({
left: 10,
top: 100
}, time, function() {
bounceUp();
});
};
function bounceUp() {
$("#ball").animate({
top: top_bounce
}, time);
top_bounce = top_bounce + 20;
};
function shadowUp() {
$("#shadow").animate({
width: 100,
height: 5,
left: 10,
top: 200,
opacity: 1
}, time,
function() {
shadowDown();
});
};
function shadowDown() {
$("#shadow").animate({
width: 0,
height: 0,
left: 15,
top: 200,
opacity: 0
}, time);
};
function finalDown() {
$("#ball").animate({
left: 10,
top: 100
}, time);
};
function finalShadow() {
$("#shadow").animate({
width: 100,
height: 5,
left: 10,
top: 200,
opacity: 1
}, time);
};
$('#Get').click(function() {
for (var i = 0; i < bounces; i++) {
setTimeout(function() {
bounceDown();
shadowUp();
}, time * 2 * i);
setTimeout(function() {
finalDown();
finalShadow();
}, 5000);
};
});
});
body {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
left: 50%;
width: 500px;
height: 700px;
}
#ball {
width: 100px;
height: 100px;
position: absolute;
background-color: #e65454;
border-radius: 50%;
}
#shadow {
position: absolute;
height: 5px;
width: 100px;
background: radial-gradient(ellipse at center, rgba(91, 91, 91, 1) 0%, rgba(142, 142, 142, 0.84) 16%, rgba(227, 228, 229, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5b5b5b', endColorstr='#00e3e4e5', GradientType=1);
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button id="Get">Set</button>
<div id="container">
<div id="ball"></div>
<div id="shadow"></div>
</div>
最佳答案
关于jquery - 更改大于或小于给定值的值在 jQuery 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39925274/