循环中的文本淡出/淡出动画

这里有一种不同的方法，它的工作方式有点像插件，带有选项:

/* The cycle function performs successive fadeIns using the provided selectors
 * and finishes by fading them all out, and executing a provided callback
 */
function cycle(options) {
  var settings = {
    'selectors': options.selectors || [],
    'remaining': options.selectors.slice().reverse() || [],
    'delay'    : options.delay || 1000,
    'duration' : options.duration || 3000,
    'complete' : options.complete || function() {}
  };
  cycleStep();
  function cycleStep() {
    if(!settings.remaining.length){
        var callbackExecuted = false;
        $( settings.selectors.join(', ') ).delay(settings.delay)
                                          .fadeOut(settings.duration, function(){
                                            if(!callbackExecuted){
                                                settings.complete();
                                                callbackExecuted = true;
                                              }
                                          });
    }
    else
        $( settings.remaining.pop() ).delay(settings.delay)
                                     .fadeIn(settings.duration, cycleStep);
  }
}
/* This function will loop the cycles with the options you provide it */
function myLoop(){
  cycle({
    selectors: ['.slogan1', '.slogan2', '.slogan3', '.slogan4'],
    complete: function() {
      cycle({
        selectors: ['.slogan5', '.slogan6', '.slogan7', '.slogan8'],
        complete: myLoop
      });
    }
  });
}
// Execute the loop
myLoop();

JS Fiddle Demo

使用延迟是不准确的，你的动画将开始重叠的时间。我建议你使用回调函数，像这样:

var i = 0,
    delay = 2000;
function show(){
  if (i && i % 4 == 0 && $('.slogan > *:visible').length > 0) {
    $('.slogan > *:visible').fadeOut().promise().done(doShow);
    if (i == 8)
      i = 0;
  }
  else 
    doShow();  
}
function doShow(){
  $('.slogan > *').eq(i++).fadeIn(function(){
    setTimeout(show, delay);
  })
}
show();

.slogan > * {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 slogan text-right">
    <h1 class="slogan1">test 1</h1>
    <h1 class="slogan2">test 2</h1>
    <h1 class="slogan3">test 3</h1>
    <p  class="slogan4">test 4</p>
    <h1 class="slogan5">test 5</h1>
    <h1 class="slogan6">test 6</h1>
    <h1 class="slogan7">test 7</h1>
    <p class="slogan8">test 8</p>
</div>

已更新

使用setInterval for循环:

setInterval(function(){
    $('.test1, .test2').show();
    $(".test1 [class*='slogan'], .test2 [class*='slogan']").hide();
    cycle();
}, 6000);

尝试将前4个测试分组在div中，分类为test1，第二次测试也一样，分类为test2:

JS:

cycle = function() {
    $('.slogan1').delay(500).fadeIn();
    $('.slogan2').delay(1000).fadeIn();
    $('.slogan3').delay(1500).fadeIn();
    $('.slogan4').delay(2000).fadeIn();
    $('.test1').delay(2500).fadeOut();
    $('.slogan5').delay(3000).fadeIn();
    $('.slogan6').delay(3500).fadeIn();
    $('.slogan7').delay(4000).fadeIn();
    $('.slogan8').delay(4500).fadeIn();
    $('.test2').delay(5000).fadeOut();
};
cycle();

<div class="col-md-12 slogan text-right">
    <div class="test1">
        <h1 class="slogan1">test 1</h1>
        <h1 class="slogan2">test 2</h1>
        <h1 class="slogan3">test 3</h1>
        <p  class="slogan4">test 4</p>
    </div>
    <div class="test2">
        <h1 class="slogan5">test 5</h1>
        <h1 class="slogan6">test 6</h1>
        <h1 class="slogan7">test 7</h1>
        <p  class="slogan8">test 8</p>
    </div>
</div>

    var itemIndex = 0;
function changeDisp(){
    if(itemIndex > 0 && itemIndex % 4 == 0){
        $('.slogan').children().slice(0, itemIndex ).hide('slow');
        if(itemIndex == 8)
            itemIndex = 0;
    }
    $('.slogan').children().eq(itemIndex).fadeIn();
    itemIndex++;
}
setInterval(changeDisp, 2000);

.slogan h1, .slogan p{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-12 slogan text-right">
    <h1 class="slogan1">test 1</h1>
    <h1 class="slogan2">test 2</h1>
    <h1 class="slogan3">test 3</h1>
    <p  class="slogan4">test 4</p>
    <h1 class="slogan5">test 5</h1>
    <h1 class="slogan6">test 6</h1>
    <h1 class="slogan7">test 7</h1>
    <p class="slogan8">test 8</p>
</div>

在这两个部分周围放置一个类并淡出它们会更有效。我不认为这是直接工作，但让你在正确的方式

<div class="col-md-12 slogan text-right">
    <div class='section1'>
        <h1 class="slogan1">test 1</h1>
        <h1 class="slogan2">test 2</h1>
        <h1 class="slogan3">test 3</h1>
        <p  class="slogan4">test 4</p>
    </div>
    <div class='section2'>
        <h1 class="slogan5">test 5</h1>
        <h1 class="slogan6">test 6</h1>
        <h1 class="slogan7">test 7</h1>
        <p class="slogan8">test 8</p>
    </div>
</div>

和js

var counter = 0;
setInterval(function(){
    counter++
    $('.slogan'+counter).delay(1000).fadeIn(3000);
    if (counter === 4) $('section1').delay(1000).fadeOut(3000);
    if(counter > 8){ 
        $('section2').delay(1000).fadeOut(3000);
         counter = 0
       }
}, 2000);