jQuery animate within animate callback works only once

animation, javascript, jquery

Solution

See working sample here, your left is conflicting with your first right -100% animation and at the end if you don't reset the right then it will conflict with your second left animation

http://jsfiddle.net/PAdr3/2/

reset left before animating

container.css('left', 'auto');

and reset right when complete

container.animate({
     'left':'0%'
 }, 300, 'swing', function() {
    $(this).css('right', 'auto');

 });

Problem

I have two pagination links which trigger a jQuery animation. A callback function on the animation triggers a second animation. This works fine, however, it only works the first time the function is called. Each time after, the first of the 2 animations works and the second one does not, it merely changes the CSS without the effect. I'm racking my brain here, to no effect (pun intended). ``` function switchItem(e) { e.preventDefault(); // If not current piece if($(this).hasClass('light')) { /* VARIABLES */ var container = $('.portfolio footer .portfolio_content'); var link = $(this).attr('id'); var newItem = $(this).html(); /*=================================================== * This is the Key part here ===================================================*/ /* FIRST ANIMATION */ container.animate({ 'right':'-100%' }, 300, 'swing', // Callback Function function() { $(this).html('').css({'left':'-100%'}); $.get('inc/portfolio/'+link+'.php', function(data) { container.html(data); /* SECOND ANIMATION */ container.animate({ 'left':'0%' }, 300, 'swing'); }); }); } } ``` Here is the demonstration: http://eoghanoloughlin.com/my_site/#portfolio

Original source