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

Question

我正在尝试找到一种方法来为幻灯片的每张幻灯片的图像标题和标题设置动画，并将它们的动画效果与幻灯片的动画效果同步。即一旦幻灯片过渡效果结束，标题从右到左，标题从上到下，当幻灯片过渡效果开始时，整个文本会在幻灯片淡出的同时淡出，并让新幻灯片和文本淡入。

我想出了如何使用 .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 和 +200ms 的 p，没有额外的延迟 ($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 的位置放置任何标题和动画，它们将在每张幻灯片加载后显示。

您也可以使用before，具体取决于最适合您的幻灯片的内容。

演示here

详细了解它们的使用方式here。