幻灯片上的文本动画的jQuery循环

我正在尝试找到一种方法来为幻灯片的每张幻灯片设置图像标题和标题的动画，并将其动画效果与幻灯片放映同步。 即，一旦幻灯片切换效果结束，标题从右向左移动，标题从上到下，当幻灯片切换效果启动时，整个文本将在幻灯片淡出的同时淡出，让新的幻灯片和文字淡入。

我想出了如何使用.animate（ http://jsfiddle.net/S8F9Y/ ）使我的图像标题和标题移动：

var $j = jQuery.noConflict(); $j(document).ready(function() { // Get the slideshow options var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed ); var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration ); var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight ); var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth ); var $slidetransition = meteorslidessettings.meteorslideshowtransition; var $captionduration = $slidetimeout - ($slidespeed*2); $j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/}); $j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/}); $j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/}); $j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/}); // Setup jQuery Cycle $j('.meteor-slides').cycle({ cleartypeNoBg: true, fit: 1, fx: $slidetransition, height: $slideheight, next: '#meteor-next', pager: '#meteor-buttons', pagerEvent: 'click', pause: 1, prev: '#meteor-prev', slideExpr: '.mslide', speed: $slidespeed, timeout: $slidetimeout, width: $slidewidth }); // Setup jQuery TouchWipe $j('.meteor-slides').touchwipe({ wipeLeft: function() { $j('.meteor-slides').cycle('next'); }, wipeRight: function() { $j('.meteor-slides').cycle('prev'); }, preventDefaultEvents: false }); // Add class to hide and show prev/next nav on hover $j('.meteor-slides').hover(function () { $j(this).addClass('navhover'); }, function () { $j(this).removeClass('navhover'); }); // Set a fixed height for prev/next nav in IE6 if(typeof document.body.style.maxWidth === 'undefined') { $j('.meteor-nav a').height($slideheight); } // Add align class if set in metadata $j('.meteor-slides').each(function () { meteormetadata = $j(this).metadata(); if (meteormetadata.align == 'left') { $j(this).addClass('meteor-left'); } else if (meteormetadata.align == 'right') { $j(this).addClass('meteor-right'); } else if (meteormetadata.align == 'center') { $j(this).addClass('meteor-center'); } }); }); 

• 第一个问题是没有循环所以文本动画只播放一次，
• 第二个问题是文字效果与幻灯片效果不同步，
• 第三个问题是第一张幻灯片没有幻灯片转换，所以如果这是第一张幻灯片，文本动画应该立即开始为h1而p为+ 200ms，没有额外的延迟（$ slidespeed）。

提前谢谢，金

Answer 1

使用每张幻灯片的回调，而不是尝试按时间同步它们。

 $j('.meteor-slides').cycle({ after: function (currSlideElement) { // Place all your animations here // Example: $j(currSlideElement).find('h1').animate(); // ... }, cleartypeNoBg: true, fit: 1, fx: $slidetransition, height: $slideheight, next: '#meteor-next', pager: '#meteor-buttons', pagerEvent: 'click', pause: 1, prev: '#meteor-prev', slideExpr: '.mslide', speed: $slidespeed, timeout: $slidetimeout, width: $slidewidth }); 

将所有标题和动画放在其中// Place all your animations here并在每张幻灯片加载后显示。

您也可以根据最适合幻灯片放映的内容使用。

在这里演示

详细了解如何使用它们。