1

quiero hacer que al darle click a un elemento se ejecuten las siguientes funciones

$( ".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');
    });

2
  • te genera errores ?
    – srJJ
    Commented el 3 ago. 2018 a las 0:13
  • no no se como hacerlo xD por que si solo lo pongo asi no hace nada por que pasa al mismo tiempo Commented el 3 ago. 2018 a las 0:16

3 respuestas 3

1

EL uso mas sencillo para el caso es utilizando la funcion setTimeout()
EL funcionamiento seria el siguiente:

setTimeout(funcion,tienmpo);

Con tu ejemplo quedaria tal que asi:

$(".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
});
1

No hace falta que definas la duración del evento en tu script puesto que puedes subscribirte a los eventos de animación

Javascript Puro (ninguna librería)

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>

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

0

Hay varias formas de hacerlo. Si solo quieres que espere 1 segundo, puedes hacerlo con el setTimeOut()

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

Otra forma es con jQuery Animation, puedes ejecutar una función luego de la otra. Te dejo este link https://www.w3schools.com/jquery/jquery_animate.asp

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.