好的。我仍在努力让我的工具提示在定时转换中淡入淡出。一点帮助我们很棒！
所以我希望我的“推子”div 开始 onClick 一个按钮淡入，持续 5 秒，然后按顺序淡出。就像我的新 UI 的快速定时教程一样。
这是我的代码：
JS
function fadeLoop() {
var counter = 0,
divs = $('.fader').hide(), // Selecting fader divs instead of each by name.
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() { // return interval so we can stop the loop
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;
}
});
});
HTML
<div class="fader">
<div id="tutorial1" class="tutorial 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>
<div class="fader">
<div id="tutorial2" class="tutorial 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>
<div class="fader">
<div id="tutorial3" class="tutorial createquestion3">
<div class="arrow-w" style="font-size:1em;" >
</div>
Select your options and/or upload an attachment (file, video or audio).
</div>
</div>
<div class="fader">
<div id="tutorial4" class="tutorial createquestion4">
<div class="arrow-n" style="font-size:1em;" >
</div><br />
To create questions easier update your question preferences in your account area options.
</div>
</div>
<div class="fader">
<div id="tutorial5" class="tutorial 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>
<div class="fader">
<div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.
<div class="arrow-e" style="font-size:1em;" >
</div>
</div>
<input type="button" value="Start" name="Start" />
CSS
.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;
}