使用JavaScript按顺序淡入和淡出div

时间：2012-11-29 20:24:10

标签： javascript jquery html css onclick

确定。我仍然在努力让我的工具提示在定时转换中淡入淡出。一点点帮助我们真棒！

所以我希望我的“推子”div开始点击一个淡入的按钮，持续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>
        &nbsp;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>
        &nbsp;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>
        &nbsp;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.&nbsp;
    </div>
</div>
<div class="fader">
    <div id="tutorial5" class="tutorial 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>
<div class="fader">
    <div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.&nbsp;
        <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;
}

2 个答案:

答案 0 :(得分：1)

您可以首先在按钮中添加ID，以便jQuery点击处理程序注册

<input type="button" value="Start" name="Start" id="start" />

答案 1 :(得分：1)

如果你希望它的工作原理，你的html需要与javascript相对应。

以下是工作版本：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"/>

<强> 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;
}

相关问题
最新问题