动画jQuery Cycle幻灯片的内容 [英] Animate content of jQuery Cycle slides

问题描述

每张幻灯片均由一个标题框和一个图像组成.

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>

我正在尝试在每张幻灯片中添加辅助动画，以使标题框开始从图像上移开，同时整个幻灯片都移开(使用Cycle默认动画). 所需的效果在ibm网站主页(http://www.ibm.com)上可见. 我正在尝试使用Cycle的回调之后"和之前":

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.

推荐答案

这实际上会更好一些.

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

这篇关于动画jQuery Cycle幻灯片的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！