jQuery 可变时间淡入/淡出 div

Question

我正在尝试修改此处已有的解决方案，但在页面上使用相同的 space 总共有 7 个 div 淡出 in/out。然后循环回到第一个 div 重新开始。

我还需要可变时间，即 div 一个保持可见 5 秒，div 两个保持可见 3 秒，div 三个保持可见 4 秒，依此类推因为这取决于每个内容有多少。

我似乎无法成功添加第三个 div，它在 div 两个（红色）之后淡入。

我要修改的代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>
$(document).ready(function() {
   $('#one').delay(3000).fadeOut(100);
   $('#two').delay(3000).fadeIn(100);
 });
</script>

<style>
html, body {background-color: yellow}
#one {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 200;
  background-color: #00f;
  cursor: pointer;
}

#two {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  background-color: #f00;
  display: none;
}
</style>

<div id="one">Content for Div one to go here</div>
<div id="two">Content for Div two to go here</div>

如有任何帮助，我们将不胜感激。谢谢

Answer 1

因此，我将提供一些代码片段。第一个只是指出JQuery中回调函数的概念以及递归回调。看看这个脚本：

入门代码

(function Recur(){
    $('#one').delay(3000).fadeOut(100,function(){
     $('#two').delay(3000).fadeIn(100,function(){
      $('#two').delay(3000).fadeOut(100,function(){
       $('#three').delay(3000).fadeIn(100,function(){
        $('#three').delay(3000).fadeOut(100,function(){
         $('#one').delay(3000).fadeIn(100, function(){
                Recur();
         })
        })
       });
      })
     });
   });
})();

我们有一个带有 Immediately Invoked Function Expression 的脚本，它在文档加载时被调用。在一个 div 淡出后，下一个淡入。然后在 #one div 加载回来后，再次调用 Recur() 函数开始循环。这提供了一种幻灯片效果。

请参阅fiddle：https://jsfiddle.net/n16bnm1L/1/

这并没有真正为您提供可变时序或任何其他选项，并且随着您向其中添加更多元素，它会变得更加麻烦，但它只是作为下一个代码概念的小教程 I我提供：

带可变时间的工作幻灯片

如果给每个元素添加一个class，然后根据元素集的索引进行幻灯片播放呢？

var i = 0;
var length = $('.item').length;
var variableTime = 3000; //default time

(function Recur(){
    switch(i){
     case 0:
      variableTime = 5000;
      break;
     case 1: 
      variableTime = 3000;
      break;
     case 2:
      variableTime = 4000;
      break;
    }
   $('.item').eq(i++).delay(variableTime).fadeOut(1000,function(){
     if(i == length){
      i = 0;
     }
   $('.item').eq(i).fadeIn(1000,function(){
     Recur();
   });
 });
})();

这里是fiddle：https://jsfiddle.net/n16bnm1L/2/

您可以在添加更多 div 时更新变量时间 switch 语句。只需确保为这些 div 元素添加 class item.

一个更短的选择！

如果将变量 times 放入数组中作为变量 times 的索引并且元素基本匹配会怎么样？

var i = 0;
var length = $('.item').length;
var variableTime = [5000,3000,4000];
(function Recur(){
  $('.item').eq(i).delay(variableTime[i++]).fadeOut(1000,function(){
    if(i == length){
     i = 0;
    }
    $('.item').eq(i).fadeIn(1000,function(){
     Recur();
    });
  });
})();

这里有一个 fiddle：https://jsfiddle.net/n16bnm1L/4/

Answer 2

如果你需要一个 fadein/fadeout 循环，你可以这样做：

$(document).ready(function() {

loopbox();

function loopbox() {
    $('#one').fadeIn(100).delay(5000).fadeOut(100, function() {
      $('#two').fadeIn(100).delay(3000).fadeOut(100, function() {
        $('#three').fadeIn(100).delay(4000).fadeOut(100,function() {                                
        loopbox();
        });
      });
    });
  }
});

您可以在此回调函数中添加任意数量的 div，并为每个 div 选择不同的时间。

这是jsfiddle

Answer 3

我相信有更多正确的方法来解决这个任务，但作为一种选择：

var cfg = { 
    "#one" : { delay : 1000, fade : 500},           
    "#two" : { delay : 2000, fade : 1000}, 
    "#three" : { delay : 3000, fade : 2000}
  };

var totalTime = 0;
$.each(cfg, function(k,v) { totalTime += v.delay + v.fade; });

loopDivs();
setInterval( loopDivs, totalTime);


function loopDivs(){  
  var d = 0;
  $.each(cfg, function(key, value){
    setTimeout( function(){ 
                    $(key).show()
                      .delay(value.delay)
                      .fadeOut(value.fade);
                  }, d);
    d += value.delay + value.fade;
  });
}

在此处查看完整代码https://jsfiddle.net/57n3mL82/

Answer 4

你这里的冗余太多了。你可以很简单地做到这一点。使用 classes 除了 ids

您可以设置样式 classes 以便有一个基本样式，然后每个 class 中的任何不同都可以单独更改而不是重复代码。

下面还概述了如何做到这一点，而不必担心要淡入和淡出多少 div。

$(document).ready(function(){
  fadeNext($('#div-fader > div'), 0);
});

var fadeNext = function(that, index, fadeLast){
  
  //Set the newIndex to be passed back into this function
  //This will increment up to cycle through all of the divs
  //that are children of #div-fader
  //
  var newIndex = index+1;
  
  //If the Index is 0, then we know it is either the first time
  //around, or the fader is restarting
  //
  if(index == 0) {
    
    //the fadeLast flag, that is only passed to the function recursively
    //will tell the program that the last div (in this case the #six) is still
    //showing and needs to be hidden
    //
    if(fadeLast == true) {
      $($(that)[$(that).length-1]).fadeOut(100);
    }
    
    //Regardless, when the index is 0 always fade in the first div
    //
    $($(that)[index]).fadeIn(100);
  }
  
  //Otherwise, while the index is less than the length of $(that)
  //$(that) = #div-fader's div children
  //so length in this case will be 6 as there are 6 children of #div-fader
  //
  else if(index < $(that).length){
    $($(that)[index-1]).fadeOut(100);
    $($(that)[index]).fadeIn(100);
  }
  
  //Lastly, if we do not meet any of the above conditions, that means
  //we are at the last child of #div-fader and should go back to the start
  //
  else newIndex = 0;
  
  //the setTimeout will be where you set the timing in between each element
  //to call. So each div will fade-in and out at a rate of 1000ms
  //
  setTimeout(function(){
    
    //look at what is passed back into this function, remember the fadeLast flag?
    //that is passed here as true, because we are starting the cycle over
    //and the last div needs to be faded out
    //
    fadeNext(that, newIndex, true);
  }, 1000);
}

#div-fader > div {  
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  display: none;
}

#one, #div-fader > div:nth-child(odd) {
  background-color: #00f;
  cursor: pointer;
}

#two, #div-fader > div:nth-child(even) {
  background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-fader">
  <div id="one">Content for Div one to go here</div>
  <div id="two">Content for Div two to go here</div>
  <div id="three">Content for Div three to go here</div>
  <div id="four">Content for Div four to go here</div>
  <div id="five">Content for Div five to go here</div>
  <div id="six">Content for Div six to go here</div>
</div>

jQuery 可变时间淡入/淡出 div

jQuery Fade in / Fade out divs with variable timing

html

jquery

fadeout

fadein