如何使此图像变形功能重复?

时间:2018-06-17 08:01:38

标签: jquery html css

图像变形为另一个。我希望这个函数无限循环:

$(document).ready(function(){

  $(".cup2").fadeOut(15000);
  $(".cup1").animate({opacity:'1'},15000);
  $(".cup1").delay(5000).fadeOut(10000);
  $(".cup4").delay(15000).animate({opacity:'1'},15000);
  $(".cup4").delay(5000).fadeOut(6000);
  $(".cup5").delay(30000).animate({opacity:'1'},15000);
  $(".cup5").delay(5000).fadeOut(6000);
  $(".cup6").delay(45000).animate({opacity:'1'},15000);
  $(".cup6").delay(8000).fadeOut(5000);
  $(".cup7").delay(55000).animate({opacity:'1'},15000);
});

2 个答案:

答案 0 :(得分:0)

  

尝试此迭代

  function fader() {
    setInterval(function(){
       $(".cup2").fadeToggle(400);
    }, 1000);
}
setTimeout(fader, 5000);

答案 1 :(得分:0)

  

使用承诺而不是延迟

$(document).ready(function(){
  function loop(){
    $(".cup2").fadeOut(4000,function(){
      $(".cup1").animate({opacity:'1'},4000).promise().then(function() {  $(".cup1").fadeOut(10000);
          $(".cup4").animate({opacity:'1'},4000).promise().then(function() {  $(".cup4").fadeOut(10000); 
            $(".cup5").animate({opacity:'1'},4000).promise().then(function() {  $(".cup5").fadeOut(10000); 
              $(".cup6").animate({opacity:'1'},4000).promise().then(function() {  $(".cup6").fadeOut(10000); 
                $(".cup7").animate({opacity:'1'},4000).promise().then(function() {  $(".cup7").fadeOut(10000); 
                    $(".cup2").animate({opacity:'1'},4000).promise().then(function() { loop(); });
                });
              });
            });
          });
      });  
    });
  }
  loop();
});