Error in jQuery animation

Asked

Viewed 73 times

0

<script>
    function moverFoto(){
         $('#janela').animate({left:"-200"},1000);
    }
    $( function(e) {
         setInterval(moverFoto,500);
    }); 
</script>

setInterval only runs once and to

jquery

  • no error on console

  • 1

    As it stands the code will send the window to -200 and then will do it again and again and so on. If you want her to go every time 200 less you need to take the current value and add to what you want.

3 answers

2


In fact what you’re doing is throwing the element to the left -200. As the second time he is already in this position you do not notice the function running again.

An example of code for you to notice the function by running several times is the following:

var pLeft = parseInt($('#janela').css("left")); // Pega a posição atual do elemento em relação a esquerda da tela.

function moverFoto(){
  $('#janela').animate({left:pLeft},1000);
  pLeft -= 5; // A cada execução remove 5 pixels da posição atual
  console.log("Posição atual: " + pLeft); // Código que mostra no console a posição do elemento a cada looping
}

setInterval(moverFoto,500);

Understanding the concept, just configure your animation with the appropriate values.

Example in Jsfiddle: https://jsfiddle.net/9d62n48g/11/

2

It’s not that the setInterval is only executed 1 time. It is that when you change the position of the element to -200px with the animate(), next time you call it, it won’t do anything because the element will already be in the -200px position.

You can use the callback of the method to return the element to its initial position. Example:

function moverFoto(){
   $('#janela').animate({left:"0"},1000, function(){
      
      $(this).css("left", "500px");
      
   });
}
$( function(e) {
   setInterval(moverFoto,500);
}); 
#janela{
   width: 100px;
   height: 100px;
   background: red;
   left: 500px;
   position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="janela">janela</div>

Now, the ideal thing would be to use setTimeout instead of setInterval, because the time of setInterval may not be synchronized with the time of animate():

function moverFoto(){
   $('#janela').animate({left:"10"},1000, function(){
      
      $(this).css("left", "500px");
      setTimeout(moverFoto,500);
   });
}
$( function(e) {
   setTimeout(moverFoto,500);
}); 
#janela{
   width: 100px;
   height: 100px;
   background: red;
   left: 500px;
   position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="janela">janela</div>

0

You can also use own css for animation and put it as Infinite you only need to call the function once with setTimeout

function moverFoto() {
  $("#janela").addClass("animar");
}

$(function(e) {
  setTimeout(moverFoto, 500);
});
#janela {
  width: 100px;
  height: 100px;
  background: red;
  left: 0;
  position: relative;
}

.animar {
  animation: andar 2s infinite;
  animation-fill-mode: forwards;
}

@keyframes andar {
  0% {
    left: 0;
    opacity: 9;
  }
  70% {
    opacity: 9;
  }
  100% {
    left: 500px;
    opacity: 0;
  }
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="janela"></div>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.