Menu
I want to make a couple things happen here:
Start button starts the animation and then turns into Stop button. Stop button then stops animation where it is and turns back into Start button and enables me to resume from where it stopped.
Instead the animation just disappears once i press start or stop again.
I am a newbie when it comes to this kind of stuff, if I am not clear in my intent please tell me so, and I will try to clear it up as best as I can.
<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>
420
Your JavaScript code is a little bit messy. First of all your move function:
function move(){
$("input").click(function(){
$(this).val('Stop');
$("div").css({left:'0%'}).animate({left:'100%'},1000, Stop);
Stop();
});
}
Your Stop function (not the one set as callback function of the animate function) will be called while the div is animated. You don't want this.
What you might wants is essentially three different functions:
Your move function will essentially start to move your object, the pause will obviously pause it, while the reset will put your object in the initial position, if you wanto so.
Let say your HTML file is structured like this:
<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>
Your CSS:
#object {
position: absolute;
left: 0px;
bottom: 100px;
width: 100px;
height: 100px;
}
And finally the 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%'});
}
Here is a FIDDLE where you can seet in "action".
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
