Voglio mia animazione per viaggiare orizzontalmente attraverso lo schermo e si ferma una volta si preme il pulsante di arresto

Voglio fare un paio di cose accadono qui:Voglio mia animazione per viaggiare orizzontalmente attraverso lo schermo e si ferma una volta si preme il pulsante di arresto

pulsante Start inizia l'animazione e poi si trasforma in pulsante Stop. Il pulsante Stop quindi ferma l'animazione dov'è e torna nel pulsante Start e mi consente di riprendere da dove si è fermato.

Invece l'animazione scompare appena ho premuto start o stop di nuovo.

Sono un principiante quando si tratta di questo genere di cose, se non sono chiaro nel mio intento, per favore dimmelo, e cercherò di chiarirlo nel miglior modo possibile.

<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>

fonte

2014-11-25 aAlimov

Il codice JavaScript è un po 'disordinato. Prima di tutto la funzione movimento:

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

tuo arresto funzione (non quello impostato in funzione di callback della funzione animate) sarà chiamato mentre il div è animato. Tu non vuoi questo.

quello che si potrebbe vuole è essenzialmente tre diverse funzioni:

mossa
pausa
ripristinare

La vostra funzione mossa essenzialmente inizierà a spostare il vostro oggetto, la pausa sarà ovviamente mettilo in pausa, mentre il reset metterà il tuo oggetto nella posizione iniziale, se lo desideri.

diciamo il file HTML è strutturato in questo modo:

<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>

tuo CSS:

#object { 
    position: absolute; 
    left: 0px; 
    bottom: 100px; 
    width: 100px; 
    height: 100px; 
}

E infine la 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%'}); 
}

Ecco un FIDDLE dove è possibile seet in "azione".

fonte

2014-11-26 01:00:14 Dim13i

Grazie per averlo chiarito, ho bisogno di un po 'più di pratica con JS, senza dubbio. – aAlimov

Voglio mia animazione per viaggiare orizzontalmente attraverso lo schermo e si ferma una volta si preme il pulsante di arresto

risposta

Problemi correlati