使用jquery循環插件，旋轉後幻燈片內的動畫元素

Question

我已經創建了一個使用jQuery循環的幻燈片，並且每個幻燈片div都包含包含圖像和文本的子div，並且想知道是否可以動畫文本在每個幻燈片之後的其中一個子div使用'onAfter'顯示。基本上我想知道是否可以在幻燈片放映完成後爲幻燈片div內的任何動畫製作動畫。一旦顯示幻燈片，我似乎無法得到任何事情發生或動畫。

//Run the slide show: 
$('#slide').cycle({ 
    fx:  'fade', 
    timeout: 1000, 
    after: onAfter, 
}); 

//function to animate element within the '#slide' div after slide is rotated in 
function onAfter() { 
    $('#slide div .right').animate({ 
    easing: 'linear', 
    //shrink the font size down 
    fontSize : '18px', 
}, 2000, function() { 
    // Animation complete. 
}); 
}; 

這裏的HTML：

<div id="slide"> 
    <div><!--slide 1--> 
    <div class="left"><img src="images/theimage1.jpg" alt="An Image" /></div> 
    <div class="right">this is the text I want to animate once the slide is shown</div> 
    </div> 

    <div><!--slide 2--> 
    <div class="left"><img src="images/theimage2.jpg" alt="An Image" /></div> 
    <div class="right">animate more text once this slide is displayed</div> 
    </div> 

    <div><!--slide 3--> 
    <div class="left"><img src="images/theimage3.jpg" alt="An Image" /></div> 
    <div class="right">animate this text when slide 3 is shown</div> 
    </div> 

    </div><!--end #slide --> 

這裏的CSS：

<style type="text/css" media="all"> 
    #slide { width: 950px; border: none; background-color: #fff; } 
    #slide div { width: 100%; } 
    #slide div .left {float: left; width: 350px; padding: 0;} 
    #slide div .right {float: right; color: #666; font-size: 40px; width: 560px; } 
    </style> 

Answer 1

我發現這樣的作品，雖然它可能不是最佳的解決方案的解決方案。

它看起來像你提供的代碼是幾乎所有你需要的。現在，它爲我的第一張幻燈片，但沒有後續的幻燈片。原因是onAfter函數選擇了所有「.right」div來設置動畫。因此，第一次運行時，所有「.right」div都處於最終狀態，因此再次運行它沒有任何影響（您要告訴每個div從18px到18px都進行動畫製作）。然後，關鍵是將文本重置爲原始大小，以便收縮，但僅適用於即將推出的幻燈片。要做到這一點，你可以使用插件的「before」和「after」回調函數，每個函數都發送幾個參數，其中包括「currSlideElement」和「nextSlideElement」作爲前兩個參數（你可以看到我如何將它們合併到代碼如下）。首先一個快速的側面說明，雖然：「後」回調似乎接收前一個元素和當前元素，而不是當前和下一個插件的文檔狀態。我不確定這是插件中的錯誤還是文檔中的錯字，或者（更可能），我只是誤解了一些東西。無論哪種方式，我們可以得到它的工作...

所以，唯一的變化如下： 我添加了一個回調到幻燈片前：

$('#slide').cycle({ 
    fx:  'fade', 
    timeout: 5000, 
    before: onBefore, 
    after: onAfter 
}); 

這裏是回調：

function onBefore(currentElement, nextElement) { 
    $(nextElement).find('.right').css({fontSize: '40px'}); // reset css for upcoming text 
} 

function onAfter(previousElement, currentElement) { 
    // Note: Plugin documentation says parameters should be (currentElement, nextElement), but that doesn't seem to be the case! 
    $(currentElement).find('.right').animate({fontSize: '18px'}, 2000); // animate current text 
}; 

希望有幫助（如果我過度解釋，希望它能幫助其他讀者）。

乾杯。