Question

请告诉我我应该如何使用setInterval或任何可以帮助我永远执行功能的东西： https://codepen.io/anon/pen/PaVOxM

$(document).ready(function (doStuff){


$( '.main-moto2').hide()
$( '.main-moto3').hide()

// fade in: duration 1s on complete call function
$( '.main-moto' ).fadeIn(3000, function(){

    // fade out: duration 1s, on complete call function
    $( '.main-moto' ).fadeOut(3000, function(){

    // fade in: duration 1s
    $( '.main-moto2' ).fadeIn(1000)
    $( '.main-moto2' ).fadeOut(1000, function(){
    $( '.main-moto3' ).fadeIn(1000)
    $( '.main-moto3' ).fadeOut(1000)




    });

Answer 1

var index = -1, isUpdateIndex = true;
var arrDivs = [{ className: ".main-moto", timeout: 3000 }, { className: ".main-moto2", timeout: 1000 }, { className: ".main-moto3", timeout: 1000 }];

$(document).ready(function (doStuff){
  // hide all divs
  $('.main-moto, .main-moto2, .main-moto3').hide();
  customFade();
});

function customFade() {
  if (isUpdateIndex) {
    index = (index + 1) % arrDivs.length;
  }
  isUpdateIndex = !isUpdateIndex;
  $(arrDivs[index].className).fadeToggle(arrDivs[index].timeout, customFade);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = 'main-moto'>
	<div class = 'wrap'>
		<div class = 'main-moto-text'>
		main-moto<br>
	<div class ='yellow-block'>	<span style="color: rgb(248, 184, 38);">Саша</span><br></div>
		по шоссе
		</div>
  </div>
</div>

<div class = 'main-moto2'>
	<div class = 'wrap'>
		<div class = 'main-moto-text'>
	main-moto2 <br>
	<div class ='yellow-block'>	<span style="color: rgb(248, 184, 38);">сосала</span> сушку</div>		
		</div>
  </div>
</div>

<div class = 'main-moto3'>
	<div class = 'wrap'>
		<div class = 'main-moto-text'>
		main-moto3 <br>
	<div class ='yellow-block'>	<span style="color: rgb(248, 184, 38);">реку, видит грека в реке </span> рак</div>		
		</div>
  </div>
</div>

jQuery无限动画

1 个答案: