Как назвать этот временной переход в javascript

Я пытаюсь получить 6 делений, чтобы постепенно увеличивать и уменьшать их в течение 5 секунд. Div1 покажет сначала onClick, а затем будет длиться 5 секунд, а затем он исчезнет, ​​в то время как следующий в порядке всплывет, а затем исчезнет, ​​и так далее. Я играл с этим JavaScript - но у меня возникли некоторые проблемы - 1) вызывать его при нажатии кнопки и 2) как написать код, который допускает перекрытие на 1 секунду?

Любая помощь? Вот мой JavaScript:

$(function () {

    var counter = 0,
        divs = $('#tutorial1, #tutorial2, #tutorial3, #tutorial4, #tutorial5, #tutorial6');

    function showDiv () {
        divs.hide() // hide all divs
            .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
            .show('fast'); // and show it

        counter++;
    }; // function to loop through divs and show correct div

    showDiv(); // show first div    

    setInterval(function () {
        showDiv(); // show next div
    }, 5 * 1000); // do this every 5 seconds    

});
Источник

2 ответа

Решение

http://jsfiddle.net/NpNXr/1/

HTML (я добавил класс fader чтобы указать, что это часть анимации)

<div class="fader" id="tutorial1">One</div>
<div class="fader" id="tutorial2">Two</div>
<div class="fader" id="tutorial3">Three</div>
<div class="fader" id="tutorial4">Four</div>
<div class="fader" id="tutorial5">Five</div>
<div class="fader" id="tutorial6">Six</div>

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

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;
        }
    });
});​
Источник

Спасибо всем, что помогло, вот рабочий код!

</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 %>
Источник
Другие вопросы по тегам