Fade in divs один за другим

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

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

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

Но это только затухает во всех сразу. Любые идеи?

источник

2010-09-22 Alex Sadler

Если в браузере нет Javascript, то нет fadeIn или других подобных эффектов. Поэтому вместо того, чтобы беспокоиться об отключенном браузере javascript при применении эффекта fadeIn, вы можете показать им статический контент в разделе noscript. – Atharva

Отвечая на ваш основной запрос последовательного замирания, я попытался ответить на него ниже. – Atharva

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

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

источник

2010-09-22 11:12:24

.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> элементы исчезать.

источник

2010-09-22 11:12:24

@downvoter - прокомментировать? –

. Функциональность .each slick – espais

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

источник

2010-09-22 11:14:07

Это не работает. Мне пришлось пропустить 2 функции и использовать 3 оператора. Работала отлично. – Juice

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

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

    $('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})}); 
</script>

источник

2010-09-22 11:15:46

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

Logic трюка зависит от функциональных возможностей обратного вызова 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>

источник

2012-11-24 18:42:52 Atharva

Fade in divs один за другим

ответ

Смежные вопросы