jQuery淡入淡出內容

嘿，我一直在這個腳本的工作，看不能得到任何幫助。jQuery淡入淡出內容

我把它放在我的小提琴上。基本上我有一些div s，我希望他們淡入淡出，他們現在正在做的正確。

但是，當內容1淡出時，內容2必須同時進入（我猜不透明度必須更輕）才能實現更平滑的過渡。。

現在爲內容1淡出，留下一個白色的前間距內容2進來

的JavaScript：

$(function(){ 
    function fadeMyContent() { 

     $(".thecontent:first").fadeIn(700).delay(1000).fadeOut(700, 
      function() {  
        $(this).appendTo($(this).parent()); 
        fadeMyContent();  
      }); 
     } 
    fadeMyContent(); 
});

HTML：

<ul> 
    <li class='thecontent'> CONTENT 1</li> 
    <li class='thecontent'> CONTENT 2</li> 
    <li class='thecontent'> CONTENT 3</li> 
    <li class='thecontent'> CONTENT 4</li> 
<ul>

http://jsfiddle.net/myislandshop/wV6Tk/5/

來源

2011-09-01 Jerry S.

我很讚賞你不使用插件行貨！我認爲我最糟糕的問題是當人們說「我想要[小功能X]」時，人們會提出整個jQuery UI。矯枉過正。另外，你是否希望這些div可以交叉淡入淡出，而不是淡入淡出？ – Bojangles

是的插件有時對於一些小東西來說太多了。是的，淡入淡出會很酷，但不必...... –

作爲一般規則，插件是要走的路，除非你正在構建其他人沒有做過的事情。爲什麼？你沒有想到的邊緣情況已經被計入並且代碼已經過測試。好處遠遠超過少數額外的k。 –

我有你的解決方案。我在我的JSFiddle中使用圖片，但它們只是爲了演示效果。黑色背景之間的褪色很困難;我建議你給ul一個黑色的背景，並淡入淡出文本/內容;它會帶來更好的效果。

這是小提琴的代碼。如果您需要解釋，請詢問。

function fadeDivs() 
{ 
    var currentPanel = $("ul li:visible"); 
    var currentPanelIndex = currentPanel.index(); 

    currentPanel.fadeOut(1000); 

    // If the next panel to fade in is beyond the last, start from the beginning again. 
    if(currentPanelIndex == ($("ul li").length - 1)) 
    { 
     $("ul li:first-child").fadeIn(1000); 
    } 
    else // If it's not the last li, keep going through the list 
    { 
     currentPanel.next().fadeIn(1000); 
    } 

    // Keep the ball rolling 
    setTimeout(fadeDivs, 5000); 
} 

$(document).ready(function() { 
    // Just to make it look nice - this can be deleted (it's just filler content) 
    $("ul li:eq(0)").html("<img src='http://barbados.org/landscap/bcparadise1.jpg'>"); 
    $("ul li:eq(1)").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>"); 
    $("ul li:eq(2)").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>"); 
    $("ul li:eq(3)").html("<img src='http://www.croatia-danexumag.com/cms_upload/upload/Apartments_VERUDELA_BEACH_00.jpg'>"); 

    // Start the ball rolling 
    setTimeout(fadeDivs, 3000); 
});

的圖像在等等等等，誰在乎，帶來訴訟爲我偷你的海灘;-)

來源

2011-09-01 23:47:28 Bojangles

哈哈偷海灘哈哈，即時通過XML或JSON帶來我的內容...以及確切的JSON（但沒關係），但這看起來不錯。進一步觀察。 –

jQuery淡入淡出內容

回答

相關問題