我想在这里做一些事情:
开始按钮开始动画然后变成停止按钮。 停止按钮然后停止动画，然后变回开始按钮，使我能够从停止的地方继续。
相反，一旦我再次按下开始或停止，动画就会消失。
对于这类事情，我是新手，如果我的意图不清楚，请告诉我，我会尽力澄清。
<html>
<head>
<meta charset="UTF-8">
<style>
div {left: 0px;
bottom: 100px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
move();
Stop();
});
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
function Stop(){
$("input[value='Stop']").click(function(){
$( ":animated" ).stop(true, true, false);
$(this).val('Start');
move();
});
}
</script>
</head>
<body>
<h1 style="text-align:center"> Welcome to the test</h1>
<input type='button' value='Start' id='oneButton'>
<div style="height:100px;width:100px;position:absolute;">
<img id='myRobot' src='myRobot.jpg' width="250px" height="200px"/>
</div>
</body>
</html>最佳答案
您的 JavaScript 代码有点乱。首先你的移动功能:
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
您的Stop 函数(不是设置为动画函数回调函数的函数)将在div 动画时被调用。你不想要这个。
您可能想要的基本上是三个不同的函数:
- 移动
- 暂停
- 重置
你的移动函数实际上会开始移动你的对象，暂停显然会暂停它，而重置会将你的对象置于初始位置，如果你愿意的话。
假设您的 HTML 文件的结构如下:
<h1 style="text-align:center"> Welcome to the test</h1>
<input type='button' value='Start' id='oneButton' />
<div id="object">
<img id='myRobot' alt='test' src='http://www.clker.com/cliparts/7/b/d/b/1237099752389782475nicubunu_Soccer_ball.svg.thumb.png'/>
</div>
你的 CSS:
#object {
position: absolute;
left: 0px;
bottom: 100px;
width: 100px;
height: 100px;
}
最后是 JS:
var animating = false;
$("#oneButton").on("click", function() {
if (!animating) {
$(this).val("pause");
move();
} else {
$(this).val("start");
pause();
}
});
function move() {
animating = true;
$("#object").animate({left:'100%'},1000, reset);
}
function pause() {
$("#object").stop();
animating = false;
}
function reset() {
animating = false;
$("#object").css({left: '0%'});
}
这是一个FIDDLE你可以在“行动”中看到的地方。
关于javascript - 我希望我的动画在屏幕上水平移动并在我按下停止按钮后停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27135686/