how can I execute jquery functions for times after clicking a button

Question

how can I execute jquery functions for times after clicking a button

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I want to make the following functions run when I click on an element

$( ".add-to-car-d1" ).on("click", function() {
      //al dar click que pase esto
      $('.iconcar' ).addClass('carrAnimation');
      //despues de 1 segundo pase esto
      $('.iconcar' ).removeClass('carrAnimation');
    });

jquery

asked by John Kleinad 03.08.2018 в 02:10

source

3 answers

Get selected checkbox value with jquery Update to Angular 6

score 1 · Answer 1

The simplest use for the case is using the setTimeout () function. The operation would be as follows:

setTimeout(funcion,tienmpo);

With your example it would be such that:

$(".add-to-car-d1").on("click", function () {
    //La función inicial se ejecuta al principio
    $('.iconcar').addClass('carrAnimation');
    //Espera X cantidad de milisegundso y ejectua la siguiente funcion:
    setTimeout(function(){
        $('.iconcar').removeClass('carrAnimation');
    },1000); // el tiempo a que pasara antes de ejecutar el codigo
});

score 1 · Answer 2

You do not need to define the duration of the event in your script since you can subscribe to the animation events

Pure Javascript (no bookstore)

var rectangulo = document.getElementById('rectángulo')
rectangulo.addEventListener('click', animar)

function animar (ev) {
  var htmlElem = ev.target
  // si la animación está en curso, entonces no hacer nada
  if (htmlElem.classList.contains('animar')) return
  // si no, comenzar animación
  htmlElem.classList.add('animar')
  // subscribirse al evento "animationend". Esto hace que cuando el elemento finalice de animarse, éste llame a la función 'finalizarAnimacion'
  htmlElem.addEventListener('animationend', finalizarAnimacion)
 
  function finalizarAnimacion () {
    console.log('la animación ha finalizado')
    //limpieza, esto permite que el elemento se vuelva a animar
    htmlElem.classList.remove('animar')
    // limpieza, se cancela la subscribción al evento, ésto es únicamente para impedir fugas de memoria (y por ende algunos errores en consola)
    htmlElem.removeEventListener('animationend', finalizarAnimacion)
  }
}

#rectángulo {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative
}

.animar {
  animation-name: mover;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: 2 /* ida y vuelta*/
}


@keyframes mover {
  from {
    left: 0px
  }
  to {
    left: 100px
  }
}

<div id="rectángulo"></div>
<p> Haz click en el rectángulo </p>

With jQuery

$('#rectángulo').on('click', function animar (ev) {
  var htmlElem = $(this)
  if (htmlElem.hasClass('animar')) return
  htmlElem.addClass('animar')
  htmlElem.on('animationend', finalizarAnimacion)
  
  function finalizarAnimacion () {
    console.log('la animación ha finalizado')
    htmlElem.removeClass('animar')
    htmlElem.off('animationend', finalizarAnimacion)
  }
})

#rectángulo {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative
}

.animar {
  animation-name: mover;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: 2 /* ida y vuelta*/
}

@keyframes mover {
  from {
    left: 0px
  }
  to {
    left: 100px
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="rectángulo"></div>
<p> Haz click en el rectángulo </p>

score 0 · Answer 3

There are several ways to do it. If you only want to wait 1 second, you can do it with setTimeOut ()

$('.iconcar' ).addClass('carrAnimation');
setTimeout(tuFuncion(){$('.iconcar' ).removeClass('carrAnimation');}, 1000);

Another way is with jQuery Animation, you can execute one function after the other. I leave this link link