用于按时间顺序显示和隐藏 div 的 JavaScript

Question

我在让我的代码正常工作时遇到了问题。我知道我已经问过几次这个问题，但我真的需要一些意见。感谢这个网站上的人，我能够让代码在 jsFiddle 中工作，但不能在我的浏览器中工作。

知道我做错了什么吗？

HTML

<div class="fader tutorial" id="createquestion1">
    <div class="arrow-w" style="font-size:1em;"></div>
    &nbsp;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>
    &nbsp;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>
    &nbsp;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.&nbsp
</div>

<div class="fader tutorial" id="createquestion5">
    <div class="arrow-w" style="font-size:1em;"></div>
    &nbsp;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.&nbsp;
</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 中发生......

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 %>