jquery - jQuery Cycle 幻灯片的动画内容

Question

每张幻灯片都由标题框和图像组成。

<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>

我试图在每张幻灯片中添加辅助动画，以便标题框开始滑离图像，同时整个幻灯片也移开(使用循环默认动画)。想要的效果可以在 ibm 网站主页 (http://www.ibm.com) 中看到。我正在尝试使用 Cycle 的回调“after”和“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 );        
};

但是这样，当第一张幻灯片滑开时，第二张幻灯片的标题就已经可见，因为回调应用于两个标题。所以我不知道如何让第一个消失而第二个并行进入(或保持静止)。

Answer 1

这实际上会更好一些。

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);
};