Jquery Sliderのテキストのフェーディング

Question

私の問題はこれです：フラッシュビデオに似たJQuery Imageスライダを作成する必要があります。私はスライダーを持っている限り成功していますが、テキストを手に入れることはできません。画像が表示された後で、このページでの操作と同様に、テキストがフェードインする必要があります。http://absolutetileandstone.com/私は.animate（）や.fadeIn（）など、私が考えることができるすべてを試しましたが、どこにもいませんでした。私は2つのスライダを一緒に追加して、タイミングを同期しようとしましたが、これは不可能でした...どんな提案？

はここでスライダーをやり直しについてプラグインはネイティブテキストフェードを行いませんので、どのように..スライダー http://www.trileafweb.com/absolute

Answer 1

うーん内のスライダーを持ってデモです。

デモ：http://jsfiddle.net/LQgw4/

HTML

<div id="container"> 
    <div> 
     <span class="one">absolute</span> 
     <span class="two">hauuu~</span> 
     <img src="http://lorempixum.com/250/200/abstract/1" /> 
    </div> 
    <div> 
     <span class="one">absolute</span> 
     <span class="two">uguu~</span> 
     <img src="http://lorempixum.com/250/200/abstract/2" /> 
    </div> 
    <div> 
     <span class="one">absolute</span> 
     <span class="two">kyaa~</span> 
     <img src="http://lorempixum.com/250/200/abstract/3" /> 
    </div> 
    <div> 
     <span class="one">blerg</span> 
     <span class="two">abalone</span> 
     <img src="http://lorempixum.com/250/200/abstract/4" /> 
    </div> 
</div> 

CSS

#container img, 
#container span { 
    display:none; 
} 

#container span.one, 
#container span.two { 
    color:#fff; 
    font:bold 30px verdana; 
    position:absolute; 
    left:30px; 
    top:90px; 
} 

#container span.two { 
    left:130px; 
    top:120px; 
    font-size:20px; 
} 

jqueryの

$(document).ready(function() { 
    startSlider(0); 
}); 

function startSlider(idx) { 
    $img = $("#container div img").eq(idx); 
    $span1 = $("#container div span.one").eq(idx); 
    $span2 = $("#container div span.two").eq(idx); 

    $img.fadeIn('slow', function() { 
     $span1.delay(600).fadeIn('slow', function() { 
      $span2.delay(600).fadeIn('slow', function() { 
       $span1.delay(600).fadeOut(); 
       $span2.delay(600).fadeOut('fast', function() { 
        $img.fadeOut('slow', function() { 
         if ($("#container div img").length - 1 == idx) { 
          startSlider(0); 
         } 
         else { 
          startSlider(idx + 1); 
         } 
        }); 
       }); 
      }); 
     }); 
    }); 
} 

---

またはあなたが最初のテキストがフェードアウトしないようにすることを望む場合：http://jsfiddle.net/azzWZ/