All geek questions in one place

I want my animation to move horizontally across the screen and stop as soon as I press the stop button

I want to do a couple of things here:

The start button starts the animation, and then goes to the stop button. Stop, and then stops the animation where it is, and returns to the Start button and allows me to resume work where it was stopped.

Instead, the animation simply disappears as soon as I press the "Start" or "Stop" button again.

I'm new when it comes to this kind of thing, if I'm not clear about my intentions, tell me about it and I will try to clear it out as best as possible.

<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>
+5
source share
1 answer

Your JavaScript code is a little dirty. First of all, your move function:

 function move(){ $("input").click(function(){ $(this).val('Stop'); $("div").css({left:'0%'}).animate({left:'100%'},1000, Stop); Stop(); }); }

The Stop function (and not the function defined as the callback function of the animation function) will be called while the div is being animated. You do not want this.

What you may want are essentially three different functions:

  • step
  • pause
  • reset

Your move function will essentially begin to move your object, a pause will obviously pause it, and reset will put your object in its original position if you want to.

Let's say your HTML file is structured as follows:

 <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, 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 the FIDDLE where you can see the "action".

+3
source

Source: https://habr.com/ru/post/1207693/

More articles:


All Articles