jQuery的周期在幻灯片文字动画 [英] jQuery cycle for text animation on a slideshow

问题描述

我试图找到一种方式来为动画幻灯片的每张幻灯片图像标题和说明，并同步与幻灯片的那些他们的动画效果。即只要幻灯片过渡效果已结束时，标题由右至左和从顶部至底部的字幕云，和当滑动过渡效果踢，整个文本将同时滑动淡出淡出，并让新的幻灯片和文本褪色。

I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.

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

I figured out how to make my image title and caption move using .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');
        }
    });

});

• 第1问题是，有没有循环，使文本唯一动画
  播放一次，


• 第二个问题是，文字效果不同步与幻灯片效果，


• 第三个问题是，有第一张幻灯片没有幻灯片切换，所以如果这是第一张幻灯片，文字动画应该对p马上为H1开始，+ 200毫秒，没有额外的延迟（slidespeed $）。



在此先感谢，
金

Thanks in advance, Kim

推荐答案

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

Use the callback of each slide instead of trying to sync them by time.

$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 any captions and animations where it says // Place all your animations here and they will show after each slide has loaded.

您也可以使用之前取决于什么是最适合你的幻灯片。

You can also use before depending on what's best suited for your slideshow.

这里

Demo here

了解更多有关如何使用它们这里。

Find more about how they are used here.

这篇关于jQuery的周期在幻灯片文字动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！