我在让我的代码正常工作时遇到问题。我知道我已经问过这个问题几次了,但我真的需要一些意见。感谢这个网站上的某个人,我能够让代码在 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 中实现这一点......</p>