jQuery fadeTo - 如何使用

首先，我想說我是學習jQuery的新手，我正嘗試使用它創建幻燈片。jQuery fadeTo - 如何使用

這裏是jQuery的：

$(document).ready(function() { 
    $("#Slider li img").click(function() { 
     $("").fadeTo('slow',0); 
     $('#mainImg').attr('src',$(this).attr('src').replace('thumb/', '')); 
    }); 

    var imgSwap = []; 
    $("#Slider li img").each(function() { 
     imgUrl = this.src.replace('thumb/', ''); 
     imgSwap.push(imgUrl); 
    }); 
    $(imgSwap).preload(); 
}); 

$.fn.preload = function() { 
    this.each(function() { $('<img/>')[0].src = this; }); 
}

而且我的div：

<div id="Slider"> 
    <img src="sliderImg/img_1.png" alt="" id="mainImg" /> 
    <ul> 
     <li><img src="sliderImg/thumb/img_1.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_2.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_3.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_4.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_5.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_6.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_7.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_8.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_9.png" alt="" /></li> 
    </ul> 
</div>

我想要做的是使圖像之間的過渡。
我該怎麼做這樣的事情？我試圖使用fadeTo()函數，但我無法成功。

感謝您的幫助

來源

2013-10-22 user2908225

fadeTo（）方法用於執行部分不透明度轉換。對於幻燈片，您可能需要fadeIn（），fadeOut（）或fadeToggle（），從完全不透明度轉換爲零不透明度，反之亦然。那就是說什麼不起作用？請更具體一些。 – isherwood

你可以創建一個js小提琴 – iJade

您$("").fadeTo('slow',0);不能工作，因爲你沒有指定任何元素。

您可以使用$(this).fadeTo('slow', 0);或任何其他選擇器。

來源

2013-10-22 17:46:19

fadeTo不用於淡入淡出到不同的元素，它用於淡化爲一個元素的不同風格。

您可以淡出一個元素，並淡入另一個元素以完成您的操作。

來源

2013-10-22 17:46:27

那麼如何能給予transitinon？或者哪個功能用於它？ – user2908225

fadeout和fadeIn會更好地用在這裏 –

看看這些幻燈片，並在他們的代碼中挖掘，看看發生了什麼; http://www.webtuts.info/webdesigning/jquery-slideshow-tutorial-beginners/933/ –

您需要獲取所有圖像，並將它們存儲在一個數組中。顯示第一個。單擊顯示下一個（在陣列中走一步）並隱藏其餘部分。然後如此。其餘的只是CSS。

來源

2013-10-22 17:57:00 marko

其他答案突出顯示了代碼中的問題，但您可以考慮使用JQuery的幻燈片插件作爲編寫自己的幻燈片的替代方案。您可能會發現使用插件可以更輕鬆地實現您所追求的效果。您可以在這裏瀏覽JQuery插件網站上的幻燈片插件：http://plugins.jquery.com/tag/slideshow/ 也有許多博客列出了Google的「最佳jquery幻燈片插件」。

來源

2013-10-22 17:57:30

jQuery fadeTo - 如何使用

回答

相關問題