Test page doesn't replay animations

[daneden]

Clicking on a test button on the home page more than once will not work - the user must click on another test, then return to the desired test.

It appears that the .removeClass().addClass() jQuery function is executing too quickly. I've also tried adding a relatively short delay, but no success.

[decthomas]

I had a similar problem with an animation that wouldn't play multiple times even though it had been triggered.
Adding animation-direction: alternate; to the CSS did the trick for me.

[daneden]

@dec adding animation-direction: alternate didn't fix this unfortunately!

[millermedeiros]

it needs to happen on a timeout or you need to stop and remove the animation before setting a new one:

//"poor code" just to test on the console
$('.butt-small:first').click(function(evt){
  //just to block the current `onclick` and the link itself
  evt.preventDefault(); 
  evt.stopPropagation();

  var $at = $('#animateTest').removeClass();  
  //timeout is important !!
  setTimeout(function(){ 
    $at.addClass('flash') 
  }, 10); 
});

I would probably add a data-attribute to each button and create a generic click handler (and remove the "onclick" attributes):

<a href="#cta" class="butt butt-small butt-anim" data-anim="flash">flash</a>

jQuery(document).ready(function($){

    var destAnim = '',
        $animateTest = $('#animateTest');

    function animateOnClick(evt){
        $animateTest.removeClass();
        //need to add a `data-anim="animationName"` to each btn
        destAnim = $(this).data('anim');
        setTimeout(addDestAnimClass, 10);
    }

    function addDestAnimClass(){
        $animateTest.addClass(destAnim);
    }

    //need to add a class '.butt-anim' to each btn that toggles animations
    $('.butt-anim').live('click', animateOnClick);

});

I was going to fork it and do it but then I realized the project page isn't a gh-pages banch..

cheers.

[daneden]

New demo page doesn't have this issue.