我使用jquery循环创建了一个幻灯片,每个幻灯片div都包含包含图像和文本的子div,并且想知道是否可以在每张幻灯片显示后为其中一个子div中的文本设置动画'onAfter'。基本上我想知道幻灯片完成后是否可以对幻灯片 div 中的任何内容进行动画处理。一旦显示幻灯片,我似乎无法发生任何事情或动画。
//Run the slide show:
$('#slide').cycle({
fx: 'fade',
timeout: 1000,
after: onAfter,
});
//function to animate element within the '#slide' div after slide is rotated in
function onAfter() {
$('#slide div .right').animate({
easing: 'linear',
//shrink the font size down
fontSize : '18px',
}, 2000, function() {
// Animation complete.
});
};
这是 html:
<div id="slide">
<div><!--slide 1-->
<div class="left"><img src="images/theimage1.jpg" alt="An Image" /></div>
<div class="right">this is the text I want to animate once the slide is shown</div>
</div>
<div><!--slide 2-->
<div class="left"><img src="images/theimage2.jpg" alt="An Image" /></div>
<div class="right">animate more text once this slide is displayed</div>
</div>
<div><!--slide 3-->
<div class="left"><img src="images/theimage3.jpg" alt="An Image" /></div>
<div class="right">animate this text when slide 3 is shown</div>
</div>
</div><!--end #slide -->
这是CSS:
<style type="text/css" media="all">
#slide { width: 950px; border: none; background-color: #fff; }
#slide div { width: 100%; }
#slide div .left {float: left; width: 350px; padding: 0;}
#slide div .right {float: right; color: #666; font-size: 40px; width: 560px; }
</style>
最佳答案
我找到了一个可行的解决方案,尽管它可能不是最佳解决方案。
看起来您提供的代码几乎就是您所需要的。事实上,它对我来说适用于第一张幻灯片,但不适用于后续幻灯片。原因是 onAfter 函数选择所有“.right”div 进行动画处理。因此,第一次运行时,所有“.right”div 都处于最终状态,因此再次运行没有任何效果(您告诉每个 div 从 18 像素设置动画到 18 像素)。那么,关键是将文本重置为原始大小,以便可以缩小文本,但仅限于即将发布的幻灯片。
为此,您可以使用插件的“before”和“after”回调,每个回调发送几个参数,其中包括“currSlideElement”和“nextSlideElement”作为前两个参数(您可以看到我如何将它们合并到代码中)以下)。不过,首先需要注意的是:“after”回调似乎接收前一个元素和当前元素,而不是插件文档所述的当前元素和下一个元素。我不确定这是否是插件中的错误或文档中的拼写错误,或者也许(更有可能),我只是误解了某些内容。不管怎样,我们都能让它发挥作用......
所以唯一的变化如下: 我在幻灯片中添加了一个 before 回调:
$('#slide').cycle({
fx: 'fade',
timeout: 5000,
before: onBefore,
after: onAfter
});
这是回调:
function onBefore(currentElement, nextElement) {
$(nextElement).find('.right').css({fontSize: '40px'}); // reset css for upcoming text
}
function onAfter(previousElement, currentElement) {
// Note: Plugin documentation says parameters should be (currentElement, nextElement), but that doesn't seem to be the case!
$(currentElement).find('.right').animate({fontSize: '18px'}, 2000); // animate current text
};
希望有所帮助(如果我解释过度,请原谅……希望它能对其他读者有所帮助)。
干杯。
关于jquery - 使用jquery循环插件,旋转后幻灯片中的动画元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9382210/