I'm trying to play an animation in reverse by using jQuery. The original animation (which works perfectly) is as follows:
function initialSuccess(){ $('#box3').animate({ left: '-50%' }, 300, function() { $('#box3').css('left', '150%'); }); $('#box3').next().animate({ left: '50%' }, 300); }; function initialError(){ $('.step3-tag').html("Whoops, Something Went Wrong"); $('.loader').replaceWith("<img src='images/error.png' id='error-img'>"); $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>") $('#retryBtn').click(function() { $('#box3').empty(); $('#box3').animate({ left: '150%' }, 300, function() { $('#box3').css('left', '150%'); }); $('#box3').prev().animate({ left: '50%' }, 300); $('#box3').append("<h3 class='step3-tag'>Let Us Check That For You, One Sec!</h3> <div class='loader'></div>") } ); } Any ideas why this is happening? I've also tried leaving the numbers the same, but changing the direction from left to right, but that also did not work.
Added Information This is the JsFiddle example, I am trying to reverse the animation (go from div 3 to div 2 if the user presses a button)
http://jsfiddle.net/jtbowden/ykbgT/
Added Information
function initialSuccess(){ $('#box3').animate({ left: '-50%' }, 300, function() { $('#box3').css('left', '150%'); }); $('#box3').next().animate({ left: '50%' }, 300); }; function initialError(){ $('.step3-tag').html("Whoops, Something Went Wrong"); $('.loader').replaceWith("<img src='images/error.png' id='error-img'>"); $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>") $('#retryBtn').click(function() { $('#box3').animate({ left: '-50%' }, 300, function() { $('#box3').css('left', '-50%'); }); $('#box3').next().animate({ left: '-50%' }, 300); }); } initialSuccess() is the result then al goes well, and causes the div to slide off the screen to the left ad be replaced with the next div in live. initialFailure() happens when another operation fails, and is supposed to act as a "Back" button of sorts. initialFailure()'s animation is the one that is failing/ pushing the divs in the same (wrong) direction regardless of the changes in the animation itself.
2 Answers
Answers 1
It looks like what you need is following set of animations:
$('.box').click(function () { $('.box').each(function () { if ($(this).offset().left < 0) { $(this).animate({ left: '50%', }, 500); } else if ($(this).offset().left > $('#container').width()) { $(this).css("left", "-150%"); } else { $(this).animate({ left: '150%', }, 500); } }); }); You can see a full example with 2 sets of animations at http://jsfiddle.net/af88ukfx/1/
Update
I'm still not sure what is your exact layout and what exactly should happen but as I wild guess I think that you need something like this:
function initialError2() { $('.step3-tag').html("Whoops, Something Went Wrong"); $('.loader').replaceWith("<img src='images/error.png' id='error-img'>"); $('#box3').append("<button class='step3-retry-button' id='retryBtn'>Try Again</button>") $('#retryBtn').click(function () { $('#box3').animate({ left: '150%' }, 300); $('#box3').prev().animate({ left: '50%' }, 300); }); } Answers 2
Wrap the above function in $(document).ready()
Please find the fiddle link . https://jsfiddle.net/q7jud6yq/
0 comments:
Post a Comment