Исчезать в div один за другим

Привет, ребята, я хорошо разбираюсь в HTML и CSS, но только jsut начал царапать поверхность jQuery. Я ищу, чтобы 3 деления исчезали при загрузке страницы один за другим. Пока у меня есть это

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().fadeIn(1500);
    $('#3').hide().fadeIn(1500);
</script>

Я слышал, что использование css для установки значения none - это кошмар для всех, у кого нет браузера JavaScript, поэтому я использовал функцию hide, чтобы изначально скрыть div.

Но это только затухает во всем сразу. Есть идеи?

 Atharva25 нояб. 2012 г., 10:21
Отвечая на ваш основной запрос последовательного замирания, я попытался ответить на него ниже.
 Atharva25 нояб. 2012 г., 10:21
Если в браузере нет Javascript, то нет fadeIn или других подобных эффектов. Таким образом, вместо того, чтобы беспокоиться о браузере с отключенным JavaScript при применении эффекта fadeIn, вы можете показать им статическое содержимое в разделе noscript.

Ответы на вопрос(5)

Вы можете.delay() каждый так, что предыдущий появляется в нужное время, например:

$("#1, #2, #3").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

Это приводит к их исчезновению в ... в том же порядке, в каком они появляются на странице, обычно это то, что вы ищете, первое задерживается 0, поэтому оно мгновенно, второе задерживается на 1500 мс (например, когда первое заканчивается и т. Д.). в.each() Перезвонитеi это индекс, начинающийся с 0, так что вы можете использовать его для быстрого вычисления правильной задержки здесь.

Еще одним преимуществом здесь является то, что этот подход гораздо проще поддерживать, например, дать им класс, чем вы можете сделать:

$(".fadeMe").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

Тогда вам потребуется нулевое обслуживание на стороне JavaScript, чтобы добавить дополнительные<div> элементы, чтобы исчезнуть.

 the_e22 сент. 2010 г., 13:44
функциональность .each гладкая
 Nick Craver22 сент. 2010 г., 13:22
@ downvoter - хотите прокомментировать?

Вот более чистый и общий способ достижения этого эффекта: проверьте это наhttp://jsfiddle.net/BztLx/20/

Трюк с логикой основан на функциональности обратного вызоваfadeIn и используя.eq() в качестве итератора для выбранных элементов.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {

    display = typeof display !== 'undefined' ? display : "block";

    var els = $(selectorText), i = 0;

    (function helper() {
        els.eq(i++).fadeIn(speed, helper).css("display", display);
        if (callback && i === els.length) callback();
    })();
}

sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
    console.log("I am just an optional callback");
});​
});
</script>

</head>
<body><style media="screen" type="text/css">
.hello {
    background-color: blue;
    height:50px;
    width: 50px;
    display: none;

}
</style>

<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>

</body></html>

Команда Fade In содержит функцию обратного вызова, см.документация, Это означает, что вы можете связать события в цепочку.

<script type="text/javascript">
    $('#1, #2, #3').hide();

   $('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>
<script type="text/javascript">
    $('#1').hide().fadeIn(1500, function(){
        $('#2').hide().fadeIn(1500, function(){
             $('#3').hide().fadeIn(1500);
        });
    });
</script>
 Juice18 июл. 2017 г., 04:06
Это не работает. Мне пришлось пропустить 2 функции и использовать 3 утверждения. Работал отлично.

С использованиемзадержка функционировать следующим образом:

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().delay(1500).fadeIn(1500);
    $('#3').hide().delay(3000).fadeIn(1500);
</script>

Ваш ответ на вопрос