jQuery Cycle 幻灯片的动画内容答案

【问题标题】：Animate content of jQuery Cycle slidesjQuery Cycle 幻灯片的动画内容
【发布时间】：2012-12-05 14:10:17
【问题描述】：

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

<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 的回调“之后”和“之前”：

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

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

【问题讨论】：

标签： jquery jquery-cycle

【解决方案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);
};

【讨论】：

【解决方案2】：

做到这一点的最佳方法是创建自己的过渡并将标题动画作为其中的一部分。与使用 onAfter 和 onBefore 相比，它确实需要更多的工作，在这种情况下对您不起作用。

这是一个可以帮助您入门的示例：http://return-true.com/2012/03/creating-a-custom-caption-transition-for-jquery-cycle/

【讨论】：

【解决方案3】：

晚了几个月，但希望这可能对其他人有所帮助：

您可以使用当前元素找到它的正确子元素

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

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

【讨论】：