每张幻灯片都由标题框和图像组成。
<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 );
};
但是这样,当第一张幻灯片滑开时,第二张幻灯片的标题就已经可见,因为回调应用于两个标题。所以我不知道如何让第一个消失而第二个并行进入(或保持静止)。
最佳答案
这实际上会更好一些。
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 - jQuery Cycle 幻灯片的动画内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9177471/