JQuery изображение исчезает с задержкой на X - PullRequest
Новая
       30

JQuery изображение исчезает с задержкой на X

0 голосов
/ 11 марта 2011

Как мне сделать так, чтобы мои изображения появлялись одно за другим?В настоящее время я использую Jquery Fadein, чтобы сделать мои изображения Fadein, но я хочу, чтобы они запускались в разное время.В любом случае я могу задержать изображение от выцветания?в секундах? 

 <script type="text/javascript">
$(document).ready(function(){

window.onload = function() {

$('.fader1').hide().fadeIn(3000);
$('.fader2').hide().fadeIn(9000);
$('.fader3').hide().fadeIn(6000);
};


});
 </script>


 <div class="fader1"><img src="demo.jpg"></div> 
<div class="fader2"><img src="demo.jpg"></div> 
<div class="fader3"><img src="demo.jpg"></div>

Ответы [ 3 ]

2 голосов
/ 11 марта 2011

Да, есть функция delay именно для этого. 

$('.fader1').hide().fadeIn(3000);
$('.fader2').hide().delay(1000).fadeIn(9000);
$('.fader3').hide().delay(2000).fadeIn(6000);

Это начинает их на расстоянии одной секунды.

Живой пример (с использованием слегка не по теме обновления ниже и немного отличающихся времен задержки, но вы поняли)

Не по теме : думаю, я бы спрятал изображения раньше, чем window.onload. Это сработает только тогда, когда каждая последняя вещь полностью загружена, так что, как сейчас, в общем и целом изображения будут появляться, затем исчезать, а затем исчезать.

Вы можете подумать о том, чтобы сделать это прямо в верхней части элемента <body>: 

<body>
<script>document.body.className = "loading";</script>

и добавление этого CSS: 

body.loading .fader1, body.loading .fader2, body.loading .fader3 {
    display: none;
}

тогда 

jQuery(function($) {

    $(window).load(function() {
        $('body').removeClass("loading");
        $('.fader1').hide().fadeIn(3000);
        $('.fader2').hide().delay(1000).fadeIn(9000);
        $('.fader3').hide().delay(2000).fadeIn(6000);
    });
});

... или аналогичный.

1 голос
/ 11 марта 2011

Вы можете использовать функцию обратного вызова fadeIn (), чтобы начать появление следующего изображения, как только завершится предыдущее.Попробуйте что-то вроде этого: 

$('.fader1').fadeIn(3000, function() {
  $('.fader2').fadeIn(3000, function() {
    $('.fader3').fadeIn(3000);
  });
});

, но начните с того, что ваши

уже скрыты: 
<div class="fader1" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader2" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader3" style="display: none;"><img src="demo.jpg"></div>

Ссылка: jquery fadeIn ()

0 голосов
/ 11 марта 2011

http://api.jquery.com/delay/

.delay () функция

...