jQuery cycle for text animation on a slideshow

Question

I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.

I figured out how to make my image title and caption move using .animate ( http://jsfiddle.net/S8F9Y/ ) :

var $j = jQuery.noConflict();


$j(document).ready(function() {

    // Get the slideshow options
    var $slidespeed      = parseInt( meteorslidessettings.meteorslideshowspeed );
    var $slidetimeout    = parseInt( meteorslidessettings.meteorslideshowduration );
    var $slideheight     = parseInt( meteorslidessettings.meteorslideshowheight );
    var $slidewidth      = parseInt( meteorslidessettings.meteorslideshowwidth );
    var $slidetransition = meteorslidessettings.meteorslideshowtransition;
    var $captionduration = $slidetimeout - ($slidespeed*2);

    $j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/});
    $j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/});
    $j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
    $j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});


    // Setup jQuery Cycle
    $j('.meteor-slides').cycle({
        cleartypeNoBg: true,
        fit:           1,
        fx:            $slidetransition,
        height:        $slideheight,
        next:          '#meteor-next',
        pager:         '#meteor-buttons',
        pagerEvent:    'click',
        pause:         1,
        prev:          '#meteor-prev',
        slideExpr:     '.mslide',
        speed:         $slidespeed,
        timeout:       $slidetimeout,
        width:         $slidewidth
    });

    // Setup jQuery TouchWipe
    $j('.meteor-slides').touchwipe({
        wipeLeft: function() {
            $j('.meteor-slides').cycle('next');
        },
        wipeRight: function() {
            $j('.meteor-slides').cycle('prev');
        },
        preventDefaultEvents: false
    });

    // Add class to hide and show prev/next nav on hover
    $j('.meteor-slides').hover(function () {
        $j(this).addClass('navhover');
    }, function () {
        $j(this).removeClass('navhover');
    });

    // Set a fixed height for prev/next nav in IE6
    if(typeof document.body.style.maxWidth === 'undefined') {
        $j('.meteor-nav a').height($slideheight);
    }

    // Add align class if set in metadata
    $j('.meteor-slides').each(function () {
        meteormetadata = $j(this).metadata();
        if (meteormetadata.align == 'left') {
            $j(this).addClass('meteor-left');
        } else if (meteormetadata.align == 'right') {
            $j(this).addClass('meteor-right');
        } else if (meteormetadata.align == 'center') {
            $j(this).addClass('meteor-center');
        }
    });

});

• The 1st problem is that there's no cycle so the text animation only plays once,
• the 2nd problem is that text effects are not in sync with slide effects,
• the 3rd problem is that there's no slide transition for the first slide so if this is the first slide, the text animation should start right away for h1 and +200ms for p, with no additional delay ($slidespeed).

Thanks in advance, Kim

Answer 1

Use the callback of each slide instead of trying to sync them by time.

$j('.meteor-slides').cycle({
    after: function (currSlideElement) {

        // Place all your animations here
        // Example:
        $j(currSlideElement).find('h1').animate();
        // ...

    },
    cleartypeNoBg: true,
    fit:           1,
    fx:            $slidetransition,
    height:        $slideheight,
    next:          '#meteor-next',
    pager:         '#meteor-buttons',
    pagerEvent:    'click',
    pause:         1,
    prev:          '#meteor-prev',
    slideExpr:     '.mslide',
    speed:         $slidespeed,
    timeout:       $slidetimeout,
    width:         $slidewidth
});

Place any captions and animations where it says // Place all your animations here and they will show after each slide has loaded.

You can also use before depending on what's best suited for your slideshow.

Demo here

Find more about how they are used here.