Jquery + Animate.CSS Animation Only Working Once, Animation Not Resetting

jQuery + Animate.css animation only working once, animation not resetting

See http://css-tricks.com/restart-css-animation/, which discusses this exact problem.

I think the cleanest solution is to wrap the functionality of removing the element and re-inserting it in the same position in the HTML tree in a global function. Then, when you want to restart an animation, you just remove the class, call the reset function (grabbing the newly-inserted element from the return value), and then add the animation class(es) back to start the animation again.

For example:

function reset($elem) {
    $elem.before($elem.clone(true));
    var $newElem = $elem.prev();
    $elem.remove();
    return $newElem;
} // end reset()

$("#button").click(function () {
    var $this = $(this);
    $this.removeClass();
    $this = reset($this);
    $this.addClass("fadeInDown animated");
});

http://jsfiddle.net/jqm4vjLj/6/

This solution provides maximum responsiveness, since the old in-progress animation is automatically ended when the animating element is destroyed, and the newly-inserted element's animation begins immediately.

CSS animation doesn't restart when resetting class

I think I figured it out. According to this, css animation can't get applied to the same node twice (even if you have a different animation!). So I had to clone the node, remove the original, and add back the cloned node.

How to restart/reset Jquery animation

When jQuery is animating an element, it adds the style related information in the style attribute. If you need to reset the element to it's base style without the jQuery css, simply remove this attribute at the end of the animation - See .animate() on jQuery API.

$('.block').animate({
    left: 50,
    top: 50
}, 'slow', function () { $(this).removeAttr('style'); });

The callback function will remove the style attribute and reset the element at the end of the animation.

JavaScript CSS animation only works once

It's because CSS animations don't automatically restart. In particular because you didn't define a time loop, so it just executes once.

One approach is for you to use .addClass('x').removeClass('x') to retrigger an animation defined on class X.

.addClass() is jQuery of course. You can do the same in vanilla JS using, for example, hand.className += ' my-animation'; and resetting at the top of the method as per below.

//ref: https://css-tricks.com/restart-css-animation/
document.getElementById('balance').value = "1000"
var balance = document.getElementById('balance').value;var deposit = document.getElementById('deposit');var withdraw = document.getElementById('withdraw');var hand = document.getElementById('hand');
deposit.addEventListener('click', depositCash);withdraw.addEventListener('click', withdrawCash);
function depositCash() {  hand.className = 'randoImage';  var depositAmt = prompt('How much would you like to deposit?');
  if(depositAmt != Number(depositAmt)) {    return alert('Please enter a valid integer.');  }  else if (Number(depositAmt) < 0) {    return alert('Please enter a positive integer.');  }
  hand.className += ' my-animation';  balance = Number(balance) + Number(depositAmt);  document.getElementById('balance').value = balance;}
function withdrawCash() {  var withdrawAmt = prompt('How much you you like to withdraw?');
  if(withdrawAmt != Number(withdrawAmt)) {    return alert('Please enter a valid integer.');  }  else if (Number(withdrawAmt) < 0) {    return alert('Please enter a positive integer.');  }  else if(withdrawAmt > balance) {    return alert("Your balance isn't large enough to withdraw that amount!")  }

  balance = Number(balance) - Number(withdrawAmt);  document.getElementById('balance').value = balance;}

.randoImage {  width: 25px;  height: 25px;  background-image: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);}
* {  margin:0px;  padding:0px;}
@keyframes moveDown {  0% {}  100% {margin-top:-220px;}}
@keyframes fadeIn {  0% {opacity:0;}  90%{opacity:1}  100%{opacity:0;}}
#hand {  height:300px;  width:300px;  position:absolute;  left:50%;  margin-left:-120px;  margin-top:-350px;  /*background-image:url("../images/hand.png");*/  opacity:0;}
#pigBox {  margin-left:auto;  margin-right:auto;  height:600px;  width:500px;  margin-top:250px;  position:relative;
  img {    margin:0px 50px;  }
}
input[type=text] {  float:left;  display:block;  font-size:2em;  width:500px;  border-radius:10px;  border:solid 2px pink;  margin-top:10px;  font-family: 'Gochi Hand', cursive;  text-align:center;  padding:2px;}
#deposit {  float:left;  display:block;  font-family: 'Gochi Hand', cursive;  font-size:2em;  clear:left;  width:200px;  margin:10px 25px;  border-radius:10px;  background-color:pink;  border:solid 2px pink;  padding:2px;  cursor:pointer;
  &:hover {    background-color:white;  }}
#withdraw {  float:left;  display:block;  font-family: 'Gochi Hand', cursive;  font-size:2em;  width:200px;  margin:10px 25px;  border-radius:10px;  background-color:pink;  border:solid 2px pink;  padding:2px;  cursor:pointer;
  &:hover {    background-color:white;  }}
label {  text-align:center;  display:block;  font-family: 'Gochi Hand', cursive;  font-size:2.5em;  border-radius:10px;  width:300px;  margin-left:100px;  margin-right:100px;  margin-top:5px;  margin-bottom:-15px;}
.my-animation {  animation: moveDown 1.5s ease-in-out, fadeIn 1.5s ease-in-out;}

<section id="pigBox">      <div class="randoImage" id="hand"></div><!-- end of hand-->      <img class="randoImage" />      <!--<img src="images/pig.png" />-->      <label>Balance: </label><input type="text" id="balance" />      <button id="deposit"> Deposit </button>      <button id="withdraw"> Withdraw </button>  </section><!-- end of pigBox-->

How to reset a css animation class using jquery?

Edited

You can attach single listener of animationend event to remove animation classes when animation ends

$(document).on('click', '#btn_color', function (e) {
    $('h1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function (e) {
        $('h1').removeClass('animated bounceInUp');
    });

    $('h1').removeClass('animated bounceInUp').addClass('animated bounceInUp');
});

Demo

CSS animation not being delayed and resetting after animation

#delayedText1 { opacity: 0; animation-name: fade1; animation-duration: 2s; animation-delay: 3s; } #delayedText2 { opacity: 0; animation-name: fade2; animation-duration: 2s; animation-delay: 6s; } #delayedText3 { opacity: 0; animation-name: fade3; animation-duration: 2s; animation-delay: 9s; }

Same code as you typed here,you should combine it inside your script and it will work perfectly
Goodluck

Why does my jQuery/CSS animation only work on first click?

You could listen to animationend event and remove class on it

$("body").on('click', 'a', function () {   $("div").addClass('fade').one('animationend', function() {     $(this).removeClass('fade');   });})

.fade {    animation: fadeinout .5s;}
@keyframes fadeinout {  0%,100% { opacity: 1; }  50% { opacity: 0; }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href="#">Click this</a><br><br><div style="height:200px;width:200px;background:red"></div>

reset of div's position only working sometimes

So first off, you have a syntax error.

I would approach this with using classes instead of doing it like this. At best you're going to have a buggy transition. You can adjust the css transition to make it your desired timing.

JS:

$(window).scroll(function() {
 if( $(this).scrollTop() > 500) {       
    $(".animated-logo").addClass('visible');
  } 
 else{
    $(".animated-logo").removeClass('visible');  
 }
});

CSS:

.animated-logo{   
  position:absolute; 
  top:0; 
  left:-150px; 
  width:100px; 
  z-index:2;
  transition:0.5s;
}

.animated-logo.visible{
  position:fixed;
  left:20px;
}

https://jsfiddle.net/783z9rhm/6/

---

Related Topics