How to change .animate to .css so it doesn't conflict with a CSS3 animation?

Question

Below is part of the code I'm using to navigate through a CSS3 slideshow thats being animated with a cubic bezier and timed with keyframes.

At the moment this line of code...

$("#carousel .video-list").animate({'left' : left_indent}, 1000, function () {

… is conflicting with the current css i have as I've learnt they cannot be used together. My question is how do I edit that line of code so that it's .css instead of .animate in order for it to function and not conflict with my css3 animation?

DEMO

JS

var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);

//if user clicked on prev button
$('#previous').click(function () {
    //get the right position            
    var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;
    //slide the item            
$("#carousel .video-list").animate({'left' : left_indent}, 1000, function () {

    $(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});

    //move the last item and put it as first item                
    $("#carousel .video-list li:first").before($("#carousel .video-list li:last"));
    //set the default item to correct position
    $("#carousel .video-list").css({'left' : left_value});

    $("#myVideo").get(0).play();
    $("#myVideoTwo").get(0).play();
    $("#myVideoThree").get(0).play();
    $("#myVideoFour").get(0).play();

});
//cancel the link behavior            
return false;

});

Any help would be appreciated, many thanks!

Answer 1

This isn't a cross-browser solution by any means, but you could still do this with CSS and listen for the transitionend event. The Javascript would look something like this:

$("#carousel .video-list").bind( 'transitionend', function() {

    $(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", "-webkit-animation-play-state": "paused"});

    // More code that's currently in the animation complete handler

});
$("#carousel .video-list").css({ left       : left_indent
                                 transition : 'all 1000ms linear'});

I make no warranties if that fixes your problem, but it sounds like you are looking for a way to have the .animate() completion event handler fire the code that's currently in there event though you're using CSS transitions.

By the way, jQuery will make the transition property you're passing into the .css() method cross-browser automatically (i.e. include vendor prefixes where necessary)

Also, it's worth noting that there is another event you can listen for to handle animations that are ending. Instead of transitionend, you would bind to animationend.

Answer 2

Instead of this function being inside of the click function:

$("#carousel .video-list").animate({'left' : left_indent}, 1000, function () {

Pull the function outside of it and use this:

function animateList(left_indent) {

Then inside of your click function change it to be:

var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);

$('#previous').click(function () {
    //get the right position            
    var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;

    //slide the item   
    animateList(left_indent);

    //cancel the link behavior            
    return false;
});

Updated animateList() function

function animateList(left_indent) {
    $(".video-list, #timeline, .description-list").css({"animation-play-state":"paused", "-webkit-animation-play-state": "paused"});

    //move the last item and put it as first item                
    $("#carousel .video-list li:first").before($("#carousel .video-list li:last"));

    //set the default item to correct position
    $("#carousel .video-list").css({'left' : left_value});

    $("#myVideo").get(0).play();
    $("#myVideoTwo").get(0).play();
    $("#myVideoThree").get(0).play();
    $("#myVideoFour").get(0).play();
}

This removes the javasctipt animation so you can use a CSS transition instead, based on the left property.

#carousel .video-list {
    -webkit-transition: left ease 2s; /* For Safari 3.1 to 6.0 */
    transition: left ease 2s;
}