jQuery Cycle Next和Prev with onBefore回調動畫文本內容

Question

我有一個jQuery循環幻燈片，其中包含用作標題樣式文本的附加文本的圖像。圖像淡入，文本（放置在div中）動畫進出，大致與使用before回調方法的圖像同時進行。我正在嘗試添加上一個和下一個控件。他們工作，但他們立即前進到下一張/上一張幻燈片，因爲之前的回調延遲了，他們似乎沒有觸發之前的回調。我想知道如何讓整個系統正常工作，並且如果我點擊上一個和下一個控件，就會使動畫文本與圖像同時淡入。

解決此問題的最佳方法是什麼？我在正確的道路上，還是有一個更有效和適當的方式去做這件事？代碼如下，提前致謝！

<div id="sliderCont"> 
    <a href="#" id="prev1" name="prev1">PREV</a> <a href="#" id="next1" name= 
    "next1">NEXT</a> 

    <ul id="slider"> 
     <li> 
     <a href="#"><img src="library/images/car_tarp.jpg" /></a> 

     <div class="captionHidden"> 
      <div class="captionInner"> 
      <h2 id="slide1_headline1">Unveiling a Revolution</h2> 

      <h3 id="slide1_headline2">in Automotive Hospitality</h3> 

      <h4 id="slide1_headline3">What Makes Us Different</h4> 
      </div> 
     </div> 
     </li> 

     <li> 
     <a href="#"><img src="library/images/passion.jpg" /></a> 

     <div class="captionHidden"> 
      <div class="captionInner"> 
      <h2 id="slide2_headline1">Providing the Blueprint For</h2> 

      <h3 id="slide2_headline2">Performance with<br /> 
      Passion</h3> 
      </div> 
     </div> 
     </li> 
    </ul> 
</div> 

接下來，CSS

*, html, body { margin:0;padding: 0; } 
#sliderCont { 
height: 512px; 
width:1200px; 
overflow: hidden; 
position: relative; 
margin-top: 30px; 
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2); 
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2); 
box-shadow: 0 0 7px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2); 
} 
#slider { 
width: 1200px; 
height: 512px; 
z-index: 1; 
margin: 0; 
padding: 0; 
background: #ccc; 
overflow: hidden; 
} 
#slider li { 
margin: 0; 
} 
div.caption { 
display: none; 
position: absolute; 
top: 60px; 
left: 60px; 
z-index: 2; 
font-weight: lighter; 

} 
div.captionHidden { 
display: block; 
position: absolute; 
top: 60px; 
left: 60px; 
z-index: 2; 
width:1080px; 
} 
div.captionInner {position: relative; width:1080px;} 
div.caption span.item { 
display: inline-block; 
padding: 10px; 
font-size: 20px; 
background-color: #2C2C2C; 
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.2); 
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.2); 
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.2); 
color: #E7E7E7; 
} 
div.caption span.item.second { 
margin-left: 15px; 
margin-top: -5px; 
} 
span.slider-highlight { 
color: #59b5e2; 
} 

h2#slide1_headline1 { font-size: 79px;text-align: right;font-weight: normal; color: #353534;} 
h3#slide1_headline2 { font-family: "Arial Black", Arial; font-size: 32px;text-align: right;font-weight: bold; color:#353534;} 
h4#slide1_headline3 { font-size: 18px;text-align: right;font-weight: normal; color: #353534;} 


h2#slide2_headline1 { font-family: "Arial Black", Arial;font-weight: bold; font-size: 32px;text-align:left; color: #ffffff;} 
h3#slide2_headline2 { font-size: 79px;text-align: left;font-weight: normal;color:#ffffff;} 

那麼我們的jQuery的週期：

$(function() { 
    $('#slider').cycle({ 
     fx: 'fade', 
     speed: 800, 
     prev: '#prev1', 
     next: '#next1', 
     easing: 'easeOutCubic', 
     timeout: 5000, 
     before: onBefore 
    }); 

    function onBefore(curr, next, opts) { 
     $(this).children('.captionHidden').css({ 
      'opacity': '0', 
      'top': '0px' 
     }); 
     $(this).children('.captionHidden').animate({ 
      opacity: 1, 
      top: '60px' 
     }, 600, 'easeOutCubic').delay(5000).animate({ 
      'opacity': 0, 
      'top': '-5px' 
     }, 500, 'easeOutCubic'); 
    } 
});​ 

Answer 1

其實我去這個另一種方式;我改變了FX到scrollLeft，然後把動畫的回調後（並使用回調前「重置」的標題文字的div容器不透明度：0;頂部：0;

$(function() { 
$('#slider').cycle({ 
    fx : 'scrollLeft', 
    speed : 700, 
    prev: '#prev1', 
    next: '#next1', 
    easing: 'easeOutCubic', 
    timeout: 5000, 
    before : onBefore, 
    after: onAfter 
}); 

function onBefore(curr,next,opts) { 
    $(this).children('.captionHidden').css({'opacity' : '0','top' :'0px'}); 
} 
function onAfter(curr,next,opts) { 
    $(this).children('.captionHidden').animate({ 
    opacity: 1, 
    top: '60px' 
    }, 600, 'easeOutCubic') 
    } 
}); 

Answer 2

如果我有那麼你真正需要做的就是甚至在之前或之後都沒有使用任何東西，我在這裏寫了一個簡單的例子：http://jsfiddle.net/v3VP2/22/