javascript - jQuery 淡入淡出 DIV 内容

Question

我一直在研究这个脚本，但似乎无法获得任何帮助。

我把它放在我的 fiddle 上。基本上我有一些 div ，我希望它们淡入和淡出，它们现在正在正确执行。

但是，当内容 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/

Answer 1

我已经给你提供了解决方案。我在我的 JSFiddle 中使用图像，但它们只是为了演示效果。黑色背景之间的淡入淡出很困难；我建议您给 ul 一个黑色背景，并淡入淡出其上方的文本/内容；效果会更好。

这是来自 Fiddle 的代码。如果您需要解释，请询问。

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);
});

这些图片已获得许可，谁在乎，为我偷了你的海滩提起诉讼;-)