Question

我试图在循环中创建简单的动画，但每次都错误。

它应该如何运作？

测试1 fadein，等待2秒

测试2 fadein，等待2秒

测试3 fadein，等待2秒

测试4 fadein，等待2秒

淡出测试1，测试2，测试3，测试4 同时（重要的是，我无法实现这一点）

然后

测试5 fadein，等待2秒

测试6 fadein，等待2秒

测试7 fadein，等待2秒

测试8 fadein，等待2秒

淡出测试5，测试6，测试7，测试8 同时（重要的是，我无法实现这一点）

循环所有过程。

我的HTML代码：

<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>

这是我的JS：

$(document).ready(function() {

        var cycle;

        (cycle = function() {
            $('.slogan1').delay(1000).fadeIn(3000);
            $('.slogan2').delay(3000).fadeIn(3000);
            $('.slogan3').delay(5000).fadeIn(3000);
            $('.slogan4').delay(7000).fadeIn(3000);
            $('.slogan1, .slogan2, .slogan3, .slogan4').delay(10000).fadeOut(3000);

            $('.slogan5').delay(13000).fadeIn(3000);
            $('.slogan6').delay(15000).fadeIn(3000);
            $('.slogan7').delay(17000).fadeIn(3000);
            $('.slogan8').delay(19000).fadeIn(3000);
            $('.slogan5, .slogan6, .slogan7, .slogan8').delay(21000).fadeOut(3000);

        })();
    });

Answer 1

这是一种不同的方法，它类似于插件，有选项：

/* 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

Answer 2

<强>已更新

<强> Working fiddle

使用setInterval for循环：

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

    cycle();
}, 6000);

尝试使用类test1对div下的前4个测试进行分组，对类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();

HTML：

<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>

希望得到这个帮助。

Answer 3

使用延迟是绝对的，您的动画将及时开始重叠。我建议你们回调函数，像这样：

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>

Answer 4

在两个部分之间放置一个类并逐渐淡出它们会更有效。我不认为这可以立即起作用，但是，让你以正确的方式

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

Answer 5

    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>

循环

5 个答案:

JS Fiddle Demo