CODEWITHSUNDEEP
jqueryanimation
Shannon
Shannon

Reputation: 570

Slide Animation

I have a simple animation question, basically, I need to make an element as if it's appearing to slide to the left and the coming back in from the right with the next image. The gallery as such works but not the animation.

Here's what I have: 

$('.slideshow-container').animate({ left: -$(document).width()}, 'slow', function() {
    $('.prev').click();
    $('.slideshow-container').css({left: 'auto'});
    $('.slideshow-container').css({right: $(document).width()});
    $('.slideShow-container').animate({right : 'auto'});
});

It slides out but doesn't really come back :(

Any help?

Upvotes: 0

Views: 158

Answers (1)

Daniel Rivas
Daniel Rivas

Reputation: 256

First jQuery animations must use numeric values to work correctly, you can't use 'auto' or another non-numeric value.

Second, you can't use only 1 element to do this, because, you want to show ONE coming from the left while another ONE is leaving to the right.

Third, When using the jQuery animation API I recommend to work with only one of similar properties, like left-right, up-down and so on...

So, what you should do to achieve what you want is:

  1. Use an element to show the actual image in the slider.
  2. If the user presses 'next', the position of the second element is the width of the first element (you can also float the elements to do this).
  3. If the user presses 'prev' the position of the second element is the negative with of itself.
  4. Once the elements are positioned correctly, you only need to modify the Left OR Right CSS property, but only one, modifying both can give you troubles.

Cheers

Upvotes: 1

Related Questions