цикл 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'); 
     } 
    }); 

}); 

• 1-ая проблема заключается в том, что нет никакого цикла поэтому текстовая анимация только играет один раз,
• 2-й про что текстовые эффекты не синхронизируются со слайд-эффектами,
• 3-я проблема заключается в том, что для первого слайда нет перехода слайда, поэтому, если это первый слайд, текстовая анимация должна начинаться сразу для h1 и + 200 мс для 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 в зависимости от того, что лучше всего подходит для вашего слайд-шоу.

Demo here

Узнайте больше о том, как они используются here.