jQuery循環.fadeIn和.fadeOut一次一個div標籤內的p標籤

下面的代碼在一個證書中成功消失了6秒，等待3秒鐘，然後淡出並轉到下一個。一旦達到第三個證言，它就會跳回第一個。這正是我想要的，但在我的實際網站上，我有三個以上的推薦，未來可能會增加更多。我不希望每次添加新的推薦時都要返回並添加一個新函數。我嘗試了一段時間來使用「this」和.next（），但失敗了。我希望有人可以通過循環並使其轉移到容器中的下一個p標記，而無需每次調用新函數，從而提高效率。任何幫助表示讚賞，謝謝。jQuery循環.fadeIn和.fadeOut一次一個div標籤內的p標籤

注：我知道有類似的問題，但沒有一個是完全相同的，答案是低於標準。

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<style> 
#tml-container p { display: none; } 
</style> 
</head> 
<body> 

<div id="tml-container"> 
    <p id="one">Testimonial 1</p> 
    <p id="two">Testimonial 2</p> 
    <p id="three">Testimonial 3</p> 
</div> 

<script> 
$(document).ready(function() { 
    function doFade() { 
     $("#one").fadeIn(6000,function() { 
      $("#one").fadeOut(6000).delay(3000); 
      setTimeout(fadeTwo,6000); 
     }); 
    } 

    function fadeTwo() { 
     $("#two").fadeIn(6000,function() { 
      $("#two").fadeOut(6000).delay(3000); 
      setTimeout(fadeThree,6000); 
     }); 
    } 

    function fadeThree() { 
     $("#three").fadeIn(4000,function() { 
      $("#three").fadeOut(6000).delay(3000); 
      setTimeout(doFade,6000); 
     }); 
    } 
    doFade(); 
}); 
</script> 

</body> 
</html>

來源

2011-12-23 Justin

當你使用jQuery，我可以建議你的隱藏元素與'$（「P」）隱藏（）;'保持內容對用戶可見不jQuery作爲後備。 – mike 2013-11-22 14:36:19

這是一個非常簡單的解決辦法：

function fade($ele) { 
    $ele.fadeIn(6000).delay(3000).fadeOut(6000, function() { 
     var $next = $(this).next('p'); 
     // if there is a following `p` element, it is faded in 
     // otherwise start from the beginning by taking 
     // the parent's first child 
     fade($next.length > 0 ? $next : $(this).parent().children().first()); 
    }); 
}; 

fade($('#tml-container > p').first());

DEMO

可重複使用的插件版本：

而是遍歷某一元素的孩子，它遍歷所選內容元素。

(function($) { 
    var default_config = { 
     fadeIn: 3000, 
     stay: 3000, 
     fadeOut: 3000 
    }; 

    function fade(index, $elements, config) { 
     $elements.eq(index) 
      .fadeIn(config.fadeIn) 
      .delay(config.stay) 
      .fadeOut(config.fadeOut, function() { 
       fade((index + 1) % $elements.length, $elements, config); 
      }); 
    } 

    $.fn.fadeLoop = function(config) {  
     fade(0, this, $.extend({}, default_config, config)); 
     return this; 
    }; 

}(jQuery));

可用作：

$('#tml-container > p').fadeLoop({fadeIn: 6000, stay: 3000, fadeOut: 6000});

DEMO

來源

2011-12-23 13:08:47

*非常好的答案！特別是插件的東西。偉大的偉大的事情發生在這裏。 – Purag 2011-12-23 13:20:45

工程就像一個魅力！那個jsFiddle演示也不錯。之前從未看過那個網站。非常感謝您花時間回答，但是如果您或其他人不介意解釋以下內容。 fade（$ next.length> 0？$ next：$（this）.parent（）。children（）。first（））; – Justin 2011-12-23 13:21:48

@Justin：考慮使用插件版本，因爲它更容易重用，並且不容易改變HTML結構。我會添加一些關於該行的評論。 'x？ y：z'構造是*條件運算符*。如果'x'爲真，則返回'y'，否則返回'z'。 '$ next.length'告訴你$（this）.next（'p'）'選擇了多少個元素。如果沒有被選中，那麼沒有下面的'p'元素，我們必須從頭開始繼續，所以我們需要父母的第一個孩子。這假設第一個孩子實際上是我們想要淡入的下一個孩子（因爲它是您示例中的 – 2011-12-23 13:24:09

改了自主研發的插件，以滿足您的要求，沒有完全雖然測試。

至少應該告訴你如何正確設置這樣的東西。

希望這有助於:)

(function($){ 
    $(function(){ 
     $('#tml-container').testimonialFader(); 
    }); 

    $.fn.testimonialFader = function(){ 
     return this.each(function(){ 
      var $par = $(this), 
      $testimonials = $par.children('p'), 
      $current = $testimonials.first(); 

      $testimonials.not(':first').hide(); 

      $testimonials.on('testimonialReady.testimonialFader', wait); 
      $testimonials.on('waitComplete.testimonialFader', showNext); 

      $current.trigger('testimonialReady.testimonialFader'); 

      function wait(e){ 
       $current.trigger('waitStart.testimonialFader'); 
       setTimeout(
        function(){ 
          $current.trigger('waitComplete.testimonialFader'); 
         }, 
         6000 
       ); 
      } 
      function showNext(){ 
       $current.trigger('testimonialChange.testimonialFader'); 
       if($testimonials.length > 1){ 
        var $next = $current.next(); 
        if($next.length == 0){ 
         $next = $testimonials.first(); 
        } 
        $current.fadeOut(800); 
        $next.fadeIn(800, 
         function(){ 
          $next.trigger('testimonialReady.testimonialFader'); 
         } 
        ); 
        $current = $next; 
       } 
      } 

     }); 
    }; 
}(jQuery));

來源

2011-12-23 13:09:06

jQuery循環.fadeIn和.fadeOut一次一個div標籤內的p標籤

回答

相關問題