How can I stop a CSS3 animation from running after it has played once and call a new one in?

Question

Right now I'm working on a responsive slider, and I'm calling in an animation for the first group. My slider is a grid system set into two li classes in HTML. One being labeled "load", and the other called "transition".

The problem I have is that my site has a preloader loading in all the content before hand, and so once the loading bar finishes up, the grid loads in, and the first li class comes in, "load", and comes up via an animateUp animation.

So when the first group comes in, it goes upward via an animation, and if the user activates the next li class it transitions to fade. However, I'd like to be able to stop my user from rotating around the grid by just pressing the right arrow key and instead stopping them at the second li and forcing the user to use the back key to go back to the first child and also stopping the animateUp from going and having the first li class adopt the transition after animateUp played.

Here's the jsFiddle to get a better idea http://jsfiddle.net/BNq6t/1/embedded/result/

You can use the arrow keys to navigate (right/left)

(Notice how when you wrap around back to the first child the animateUp plays)

The HTML

The Slider

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

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 500, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    })
}

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 500, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    })
}

$('#back').click(function () {
    moveRight();
})
$('#next').click(function () {
    moveRight();
})

$('#next').click(function () {
  if (('#next').click = clicked) {
    ('#back:after').css('visbilility: visible;')
  }
})

$(document).keydown(function(e) {
  if (e.keyCode == 39) {
    moveRight();
  } else {

  }
})

$(document).keydown(function(e) {
  if (e.keyCode == 37) {
    moveLeft(); 
  } else {

  }
})

});

The CSS

#slider li.load img:nth-child(-n+3) {
    animation: pushUp 2.4s linear;
    -webkit-animation: pushUp 2.4s linear;
    -moz-animation: pushUp 2.4s linear;
    -o-animation: pushUp 2.4s linear;
}
#slider li.load img:nth-child(4), 
#slider li.load img:nth-child(5), 
#slider li.load img:nth-child(6) {
    animation: pushUp .5s linear;
    -webkit-animation: pushUp .5s linear;
    -moz-animation: pushUp .5s linear;
    -o-animation: pushUp .5s linear;
}
#slider li.load img:nth-child(7), 
#slider li.load img:nth-child(8), 
#slider li.load img:nth-child(9) {
    animation: pushUp 1.1s linear;
    -webkit-animation: pushUp 1.1s linear;
    -moz-animation: pushUp 1.1s linear;
    -o-animation: pushUp 1.1s linear;
}
#slider li.transition img {
    animation: fadeIn .55s;
    -webkit-animation: fadeIn .55s;
            -moz-animation: fadeIn .55s;
            -o-animation: fadeIn .55s; 
}

Thanks.(Also the code in this post is different than the one in the jsFiddle in regards to the images)

How can I stop a CSS3 animation from running after it has played once and call a new one in?

Answers (1)

Related Questions