JQuery Fade DIV контент - PullRequest
Новая
       15

JQuery Fade DIV контент

1 голос
/ 02 сентября 2011

Эй, я работал над этими сценариями и не могу получить никакой помощи.

У меня есть это на моей скрипке. По сути, у меня есть несколько 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/

1 Ответ

0 голосов
/ 02 сентября 2011

У меня есть для вас решение. Я использую изображения в моем 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);
});

Изображения лицензированы под бла-бла, кто заботится, возбудите иск для меня, крадущего ваш пляж; -)

...