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>

我正在尝试在每张幻灯片中添加一个辅助动画，以便标题框开始滑离图像，同时整个幻灯片移开（使用Cycle默认动画）。想要的效果在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 );        
};

但是这样第二张幻灯片的标题在第一张幻灯片滑落时已经可见，因为回调都应用于两个标题。所以我无法弄清楚如何让第一个消失并且第二个进入（或者只是保持静止）并行。

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

Answer 2

执行此操作的最佳方法是创建自己的过渡并将标题设置为动画的一部分。它确实需要比使用onAfter和onBefore更多的工作，在这种情况下这对你不起作用。

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

Answer 3

迟了几个月，但希望这可能有助于其他人：

您可以使用当前元素找到合适的孩子

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

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

动画jQuery Cycle幻灯片的内容

3 个答案: