私はjqueryのサイクルを使用してスライドショーを作成した回転

Question

後のスライド内の要素をアニメーション、jQueryのサイクルのプラグインを使用して、スライドのdiv要素のそれぞれは、画像とテキストが含まれている子divを含み、それはテキストをアニメーション化することが可能です場合には思っていました'onAfter'を使用して各スライドが表示された後の子divの1つに表示されます。基本的には、スライドが完成したら、スライドショーの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が最終的な状態にある実行しています初めてなので、それを再度実行しても効果（あなたが18pxから18pxにアニメーション化するために、それぞれ1を言っている）を持っていません。それで、キーは元のサイズにテキストをリセットして、縮小することができますが、今後のスライドでのみ行うことができます。

これを行うには、プラグインの「前」コールバックと「後」コールバックを使用して、それぞれ最初の2つのパラメータとして「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 
}; 

私が上手く説明してくれれば助けてくれると思っています。もし何かがあれば他の読者に助けてくれるとうれしいです。

乾杯。