Jquery image transition left to right and fade in, in a slideshow

Question

I have a slideshow with 6 graphics. I want to slide the first two graphics from left to right, then the 3rd graphic fade in and stick, and then slide the rest of the graphics from left to right. I am able to create a slideshow with either of the effect, but how do I slide in for some and fade in for some? Below is my code.

<div id='slider_container'>
    <div id="slides">
        <img src='images/Team-Up-wTag_CMYK_Over-White.jpg' />
        <img src='images/Together-all-3-01.jpg' />
        <img src='images/One-Team-One-Focus-RESIZED.jpg' />
        <img src='images/Orlando_Seaworld_ExteriorSeaworldView.jpg' />
        <img src='images/DSC_1465.JPG' />
        <img src='images/DSC_1470.JPG' />
    </div>
</div>

<script type="text/javascript"> 
    $(window).load(function() {
        var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(),  slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 800;

        $(slideContainer).css({
            'overflow': 'hidden',
            'position': 'relative'
        });

        $(slidesHolder).css({
            'position': 'absolute'
        });

        for (var i = 0; i < slides.length; i++) {
            $(slides[i]).css({
                'position': 'absolute',
                'top': '0',
                'left': slidePos + 'px'
            });
            slidePos = slidePos + slideWidth;
        }

        $(slidesHolder).css('width', slidePos + slideWidth);

        $(slides).first().clone().css({
            'left': slidePos  + 'px'
        }).appendTo(slidesHolder);

        function animate() {
            $(slidesHolder).delay(delay).animate({
                left: '-=' + slideWidth
            }, slideTime, function() {
                if (currentSlide < slideTotal - 1) {
                    currentSlide++;
                    animate();
                } else {
                    $(slidesHolder).css({
                        'left': 0
                    });
                    currentSlide = 0;
                    animate();
                }
            });
        }
        animate();
    });
</script>

Can you provide more information and show us what you've tried so far? — GSaunders, Feb 10 '14 at 18:42
Sorry, I forgot to post my code. I basically created a slideshow which slides the graphics from left to right. But am not sure how to update it so that the one of the transition is fade in and stick. Out of six graphics I was trying to have all other slide in left to right, but the third one have fade in effect. — developer, Feb 10 '14 at 18:49

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Ok, I've been working on this since you posted it, and I think I've come up with a first-cut.

I have many weaknesses, but one of my greatest is .animate and the concept of animations overriding each other. So I found some nice code HERE, and adapted it.

This FIDDLE just animates the four images in exactly the same way.

This FIDDLE allows you to choose which one to stop by making "distance = 0".

JS with "stop"

var $imgs = $('img');
var current = 0;
distance = 75;
animate($imgs[current]);
function animate(element)
{
  $(element).animate(
                     {
                      opacity: '1',
                      left: '+=' + distance
                      }, 
                      2000,
                      function() {
                                 $(element).animate(
                                                    {
                                                     opacity: '0',
                                                     left: '+=' + distance
                                                     }, 
                                                     2000,
                                  function(){
                                             if (current < $imgs.length-1)
                                               {
                                                if (current == 1)
                                                  {distance = 0;}
                                                    else
                                                  {distance = 75;}
                                                ++current;
                                                animate($imgs[current]);
                                                } 
                                             }
                                                     );
                                  }
                       );
}

The teaching point for me was that you have to do any fancy manipulation of the animation in the last function call, otherwise the animates will overwrite each other.

Good exercise!

Jquery image transition left to right and fade in, in a slideshow

1 Answers1

Linked