我已經創建了一個使用jQuery循環的幻燈片,並且每個幻燈片div都包含包含圖像和文本的子div,並且想知道是否可以動畫文本在每個幻燈片之後的其中一個子div使用'onAfter'顯示。基本上我想知道是否可以在幻燈片放映完成後爲幻燈片div內的任何動畫製作動畫。一旦顯示幻燈片,我似乎無法得到任何事情發生或動畫。使用jquery循環插件,旋轉後幻燈片內的動畫元素
//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>
我將圖像和文本放在單獨的div(不在eachother內),並使用CSS將文本放置在圖像頂部。 – kamalo 2012-02-21 17:37:32