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。

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

1 个答案: