Div ID淡出代码 [英] Div ID fade code

问题描述

我是jQuery的新手。有人可以帮我解决我的2天问题。
我只是需要一个淡入淡出效果的示例代码，幻灯片。

这是风格。

• 这将是同一类别的3个分区


• 第一个div，将显示6秒，然后淡出2秒
  
  
  
  
  • 在第一个淡出之前，第二个div将淡入2秒
  
  
  • 这将再次显示6秒，然后淡出2秒。
    


• 然后第三个div将以相同的方式变暗2秒。


• 将显示6秒然后淡出2secs。
  
  
  p> EDIT - 来自注释的相关代码

    
   function looptour（）{
   $（＃health）。hide（）; 
   $（＃billing）。hide（）; 
   $ ）.delay（6000）.fadeOut（2000）; 
   $（＃health）。delay（6000）.fadeIn（2000）.delay（6000）.fadeOut（2000）; 
   $ （#billing）。delay（14000）.fadeIn（2000）.delay（6000）.fadeOut（2000）; 
   $（＃pension）。delay（14000）.fadeIn（2000，looptour） ; 
  } 
   looptour（）; 
  }）; 
    

  
  

  解决方案

  我不知道你的确切问题是，因为你的代码似乎为我工作。

  
  
  

  如果是我，我可能会有点不同（假设我理解预期的结果）。

  
  
  

  尝试一下： http：// jsfiddle.net/XgFna/2/

    var arr = [
   $（＃pension ），
   $（＃health）。hide（），
   $（＃billing）。hide（）
  ]; 
   var cur = 0，nxt = 1; 
   
   setInterval（function（）{
   arr [cur] .fadeOut（2000）; 
   arr [nxt] .fadeIn（2000）; 
   cur = + 1< arr.length）？cur + 1：0; 
   nxt =（nxt + 1 }，6000） 
    

  
  

  I'm a newbie on jQuery. Can somebody help me with my 2days problem. I just in need of a sample code for a fading effect, slideshow.

  Here's the style.

  • This will be 3 Divs with same class
  • The first div, will show for 6secs then fades out for 2secs
    • before the first fades out the second div will fade in for 2secs
    • this again will show for 6secs then fades out for 2secs.
  • Then the third div will fades in same way for 2secs.
  • Will show for 6secs then fades out for 2secs. Then they will rotate or loop.

  Thank you for helping me out.

  EDIT - Relevant code from comment

  $(document).ready(function(){ 
      function looptour(){ 
          $("#health").hide();
          $("#billing").hide(); 
          $("#pension").delay(6000).fadeOut(2000);            
          $("#health").delay(6000).fadeIn(2000).delay(6000).fadeOut(2000);    
          $("#billing").delay(14000).fadeIn(2000).delay(6000).fadeOut(2000); 
          $("#pension").delay(14000).fadeIn(2000,looptour); 
     } 
     looptour(); 
  });
  

  解决方案

  I'm not sure what your exact issue is, since your code seems to work for me.

  If it were me, I might do it a little differently (assuming I understand the intended result).

  Try it out: http://jsfiddle.net/XgFna/2/

  var arr = [
      $("#pension"),
      $("#health").hide(),
      $("#billing").hide()
  ];
  var cur = 0, nxt = 1;
  
  setInterval(function() {
      arr[cur].fadeOut(2000);
      arr[nxt].fadeIn(2000);
      cur = (cur + 1 < arr.length) ? cur + 1 : 0;
      nxt = (nxt + 1 < arr.length) ? nxt + 1 : 0;
  },6000);
  

  ​

  这篇关于Div ID淡出代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！