jQuery Cycle Plugin Help

Question

jQuery Cycleプラグインを使用してスライドローテータを構築しようとしていますが、必要なカスタムディスプレイに問題があります。基本的にスライドがあり、各スライドの上部にはテキストボックスがありますテキスト。 。私だけのスライドをスライドにしたいが、私は、テキストがフェードアウトし、新しいスライドがに来るときにしたい

ここでは私のHTMLです：ここでは

<div id="home-slider"> 
    <div class="slide"> 
      <img src="image.jpg" width="200" height="200" /> 
      <div class="text-box"> 
       <p>Some text here</p> 
      </div> 
    </div> 
    <div class="slide"> 
      <img src="image.jpg" width="200" height="200" /> 
      <div class="textblock"> 
       <p>Some text here</p> 
      </div> 
    </div> 
</div> 

はJSです：

function onBefore() { 
    jQuery("#home-slider .slide .textblock").hide();  
} 
function onAfter() { 
    jQuery("#home-slider .slide .textblock").fadeIn('fast'); 
} 
jQuery("#home-slider").cycle({ 
     speed: 500, 
     timeout: 3000, 
    after: onAfter, 
    before: onBefore 

}); 

スライドが正常に動作していますが、代わりにフェードイン/アウトしたいときにテキストが滑っています。

Answer 1

スライドの場合、fxプロパティを 'scrollHorzまたはscorllVertに設定する必要があります。このデモを見てみましょう。クラス名にいくつかのタイプミスがあります。それはここだけのタイプミスで申し訳ありません

Demo

Answer 2

あなたのjqueryのコールとあなたのhtmlの一つのセクションでそのと呼ばれるテキストボックスに「＃」を不足している：

function onBefore() {  
    jQuery("#home-slider .slide .text-box","#home-slider .slide .textblock").hide(); 
} 
function onAfter(curr, next, opts) {  
    jQuery("#home-slider .slide .text-box","#home-slider .slide .textblock").fadeIn('fast');  
    jQuery("#home-slider .slide").css("zIndex",""); 
} 

Answer 3

私は何が起こっていることはスライドのdivがすでに隠されていることであると信じ、そうonbeforeは後で示されるように何の効果もありません。

この周りの一つの方法は、画面をそれを持っているし、それをonafter隠し、正しくテキストを再配置し、その後にフェードインするテキストインデントを使用することができ

。

別のオプションは、テキストオーバートップdiv要素を持つことですそれを非表示にして、下のテキストを非表示にしてdivを削除してフェードインします。

3番目のオプションは、サイクル機能の画像のみを選択することです。 jQuery（ "＃home-slider img"）。それが動作しない場合は、別のdivに移動してください。