我在使代码正常工作方面遇到问题。我知道我已经问过几次这个问题，但是我确实需要一些投入。多亏了这个站点上的某人，我才能够使代码在jsFiddle中工作，但无法在我的浏览器中工作。
对我在做什么错有任何想法吗？
的HTML
<div class="fader tutorial" id="createquestion1">
<div class="arrow-w" style="font-size:1em;"></div>
Start by creating a title and selecting a folder for your question to be stored in.
</div>
<div class="fader tutorial" id="createquestion2">
<div class="arrow-w" style="font-size:1em;"></div>
Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.
</div>
<div class="fader tutorial" id="createquestion3">
<div class="arrow-w" style="font-size:1em;"></div>
Select your options and/or upload an attachment (file, video or audio).
</div>
<div class="fader tutorial" id="createquestion4">
<div class="arrow-w" style="font-size:1em;"></div>
To create questions easier update your question preferences in your account area options. 
</div>
<div class="fader tutorial" id="createquestion5">
<div class="arrow-w" style="font-size:1em;"></div>
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 class="fader tutorial" id="createquestion6">
<div class="arrow-w" style="font-size:1em;"></div>
Write your questions, answers and you are ready to go.
</div>
<input type="button" value="Start" id="start"/>
JS
function fadeLoop() {
var counter = 0,
divs = $('.fader').hide(),
dur = 500;
function showDiv() {
divs.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
}, 5 * 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;
}
}); });
的CSS
#start{
right:1em;
top:1em;
padding:1em;
}
.tutorial {
display: table;
border: 4px solid #8C3087;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:1px 1px 3px 2px #ccc;
-webkit-box-shadow: 1px 1px 3px 2px #ccc;
box-shadow: 1px 1px 3px 2px #ccc;
position:absolute;
padding: 11px;
font-family: 'Archivo Narrow', sans-serif;
background-color:#ECA100;
width:200;
z-index:2000;
font-size:12pt;
color:#000;
vertical-align:top;
}
.arrow-n,
.arrow-e,
.arrow-s,
.arrow-w {
/*
* In Internet Explorer, The"border-style: dashed" will never be
* rendered unless "(width * 5) >= border-width" is true.
* Since "width" is set to "0", the "dashed-border" remains
* invisible to the user, which renders the border just like how
* "border-color: transparent" renders.
*/
border-style: dashed;
border-color: transparent;
border-width: 0.53em;
display: -moz-inline-box;
display: inline-block;
/* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
width: 0;
text-align:left;
}
.arrow-n {
border-bottom-width: 1em;
border-bottom-style: solid;
border-bottom-color: #8C3087;
bottom: 0.25em;
}
.arrow-e {
border-left-width: 1em;
border-left-style: solid;
border-left-color: #8C3087;
left: 0.25em;
}
.arrow-s {
border-top-width: 1em;
border-top-style: solid;
border-top-color: #8C3087;
top: 0.25em;
}
.arrow-w {
border-right-width: 1em;
border-right-style: solid;
border-right-color: #8C3087;
right: 0.25em;
}
/* Create Multiple Choice Question */
#createquestion1 {
top:140px;
left:320px;
text-align:left;
}
#createquestion2 {
top:240px;
left:320px;
text-align:left;
}
#createquestion3 {
top:340px;
left:320px;
text-align:left;
}
#createquestion4 {
top:60px;
right:10px;
text-align:right !important;
}
#createquestion5 {
top:520px;
left:320px;
text-align:left;
}
#createquestion6 {
top:140px;
left:100px;
text-align:right !important;
}
有很多可以帮助我的人！我正在工作的页面是asp。我也乐于接受新想法。理想情况下，我希望完全在CSS3中做到这一点...
最佳答案
工作代码：:-)
</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 %>
关于javascript - 用于按时间顺序显示和隐藏div的JavaScript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13635780/