在jquery滑塊上淡出文本

我的問題是：我需要製作一個類似於Flash視頻的JQuery圖像滑塊。迄今爲止，我已經取得了成功，但我無法獲得文本。我需要在圖片顯示後淡入文字，類似於在此頁面上的效果http://absolutetileandstone.com/。我已經嘗試過所有我能想到的東西，包括.animate（）和.fadeIn（），但都沒有得到。我甚至一起添加了2個滑塊，並試圖同步時間，這是不可能的...任何建議？在jquery滑塊上淡出文本

下面是有一個滑塊http://www.trileafweb.com/absolute

來源

2011-07-12 Brandon North

安置自己的滑塊的演示。 – kei

你能展示一些代碼嗎？ :) – Tobias

大多數jQuery滑塊都有某種「過渡完成」回調。將一個'fadeIn（）'綁定到該文件中，定位您想要淡入的文本。 – wanovak

嗯內滑塊演示..怎麼樣重做滑塊，因爲插件本身並不做文字褪色。

演示：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/

來源

2011-07-12 18:42:09 kei

Lifesaver，thanks。 –

在jquery滑塊上淡出文本

回答

相關問題