作爲工具提示，CSS顯示div的時間間隔

Question

我想要獲取大約8或9個div以淡入淡出時間間隔。以5秒的間隔一個接一個地相互重疊1秒。我不確定從哪裏開始。我在想CSS，然後爲onclick陣列創建一個js ...

任何想法？

克里斯

Answer 1

工作代碼:-)

</script> 
<script src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
fadeLoop() 
function fadeLoop() { 

    var counter = 0, 
     divs = $('.fader').hide(), 
     dur = 300; 

    function showDiv() { 
     $("div.fader").fadeOut(dur) // hide all divs 
      .filter(function(index) { 
       return index == counter % divs.length; 
      }) // figure out correct div to show 
      .delay(dur) // delay until fadeout is finished 
      .fadeIn(dur); // and show it 
     counter++; 
    }; // function to loop through divs and show correct div 
    showDiv(); // show first div  
    return setInterval(function() { 
     showDiv(); // show next div 
    }, 7 * 1000); // do this every 5 seconds  
}; 

$(function() { 
    var interval; 

    $("#start").click(function() { 
     if (interval == undefined){ 
      interval = fadeLoop(); 
      $(this).val("Stop"); 
     } 
     else{ 
      clearInterval(interval); 
      $(this).val("Start"); 
      interval = undefined; 
     } 
    }); 
}); 
}); 
</script> 
<!--#include file="header.asp"--> 
<% if Request("interactive") = "on" then %> 
<form name="tutorial"> 

<div class="fader"><div class="arrow-w arrowlocation1" style="font-size:1em;" ></div><div id="tutorial1" class="tutorial createquestion1">Start by creating a title and selecting a folder for your question to be stored in.</div></div> 

<div class="fader"><div class="arrow-w arrowlocation2" style="font-size:1em;" ></div> 
<div id="tutorial2" class="tutorial createquestion2">Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.</div></div> 

<div class="fader"><div class="arrow-w arrowlocation3" style="font-size:1em;" ></div> 
<div id="tutorial3" class="tutorial createquestion3">Select your options and/or upload an attachment (file, video or audio).</div></div> 

<div class="fader"><div class="quicktiptitle quicktiplocation4">QUICK TIP</div><div class="arrow-n arrowlocation4" style="font-size:1em;" ></div> 
<div id="tutorial4" class="quicktip createquestion4">To create questions easier update your question preferences in your account area options.</div></div> 

<div class="fader"><div class="arrow-w arrowlocation5" style="font-size:1em;" ></div> 
<div id="tutorial5" class="tutorial createquestion5">Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.</div></div> 

<div class="fader"><div class="arrow-e arrowlocation6" style="font-size:1em;" ></div> 
<div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.</div></div> 

<div class="fader"><div class="arrow-w arrowlocation7" style="font-size:1em;" ></div> 
<div class="quicktiptitle quicktiplocation7">QUICK TIP</div> 
<div id="tutorial7" class="quicktip createquestion7"> Click on this icon to open and close sections that you don't use. These will remain closed whenever you visit this page until you open them again.</div></div></form> 


<% end if %>