Animate content of jQuery Cycle slides

Question

Each slide is composed of a box for the title and an image.

<div id="slideshowWindow">

    <div id="One" class="slide">
        <div class="slideTitle">
            <h2>First title</h2>
        </div>
        <img src="/image.jpg" />
    </div>

    <div id="Two" class="slide">
        <div class="slideTitle">
            <h2>Second title</h2>
        </div>
        <img src="/image2.jpg" />
    </div>

</div>

I'm trying to add a secondary animation within each slide so that the title box starts to slide away from the image and at the same time the whole slide moves away (with Cycle defaults animations). The effect wanted is visible in ibm website homepage (http://www.ibm.com). I'm trying to use Cycle's callbacks 'after' and 'before':

$(document).ready(function() {
    $('#slideshowWindow').cycle({
        fx: 'scrollHorz',
        timeout:  5000,
        after: onAfter,
        before: onBefore
    });
});

function onAfter(cycle) {        
    $(".slideTitle").delay(200).animate({marginLeft:"10px"}, 200 );        
};

function onBefore(cycle) {        
    $(".slideTitle").animate({marginLeft:"-400px"}, 100 );        
};

But this way the second slide's title is already visible when the first slide is sliding away, because callbacks are applied on both titles. So I can't figure out how to make the first go away and the second come in (or just stay still) in parallel.

Answer 1

This would actually work a little bit better.

function onBefore(cycle) {        
  $(this).children("section.text").delay(300).animate({marginLeft:"35%"}, 1500);
};

function onAfter(cycle) {        
  $(this).children("section.text").delay(1300).animate({marginLeft:"-1400px"}, 1400);
};

Answer 2

The best way to do this is to create your own transition and to animate the title as a part of it. It does require a little more work than using the onAfter and onBefore which won't work for you in this case.

Here is an example that should help get you started: http://return-true.com/2012/03/creating-a-custom-caption-transition-for-jquery-cycle/

Answer 3

A couple of months late, but hopefully this might help others:

You can use the current element to find its proper children

function onAfter(cycle) {        
  $(this).children(".slideTitle").delay(200).animate({marginLeft:"10px"}, 200);
};

function onBefore(cycle) {        
  $(this).children(".slideTitle").css("marginLeft", "-400px");
};