jQuery Cycle幻燈片的動畫內容

Question

每張幻燈片都由一個標題和圖像框組成。

<div id="slideshowWindow"> 

    <div id="One" class="slide"> 
     <div class="slideTitle"> 
      <h2>First title</h2> 
     </div> 
     <img src="/image.jpg" /> 
    </div> 

    <div id="Two" class="slide"> 
     <div class="slideTitle"> 
      <h2>Second title</h2> 
     </div> 
     <img src="/image2.jpg" /> 
    </div> 

</div> 

我想每個幻燈片中添加輔助動畫，使標題框開始下滑，從圖片上移開，並在同一時間將整個幻燈片移開（用循環默認的動畫）。 需要的效果在ibm網站主頁（http://www.ibm.com）中可見。 我想和「前」「後」的使用週期的回調：

$(document).ready(function() { 
    $('#slideshowWindow').cycle({ 
     fx: 'scrollHorz', 
     timeout: 5000, 
     after: onAfter, 
     before: onBefore 
    }); 
}); 

function onAfter(cycle) {   
    $(".slideTitle").delay(200).animate({marginLeft:"10px"}, 200);   
}; 

function onBefore(cycle) {   
    $(".slideTitle").animate({marginLeft:"-400px"}, 100);   
}; 

但是，當第一張幻燈片中滑出，因爲是在兩個標題應用回調這種方式，第二幻燈片的標題已經可見。所以我無法弄清楚如何讓第一個走開，第二個走進去（或者保持靜止）並行。

Answer 1

做到這一點的最好方法是創建您自己的過渡並將標題設置爲動畫的一部分。與使用onAfter和onBefore相比，它確實需要更多的工作，在這種情況下它不適用於您。

下面是一個例子，應可幫助您開始：http://return-true.com/2012/03/creating-a-custom-caption-transition-for-jquery-cycle/

Answer 2

幾個月較晚，但希望這可以幫助別人：

您可以使用當前元素找到其合適的兒童

function onAfter(cycle) {   
    $(this).children(".slideTitle").delay(200).animate({marginLeft:"10px"}, 200); 
}; 

function onBefore(cycle) {   
    $(this).children(".slideTitle").css("marginLeft", "-400px"); 
}; 

Answer 3

這實際上會工作得更好一點。

function onBefore(cycle) {   
    $(this).children("section.text").delay(300).animate({marginLeft:"35%"}, 1500); 
}; 

function onAfter(cycle) {   
    $(this).children("section.text").delay(1300).animate({marginLeft:"-1400px"}, 1400); 
};