jquery Fade In, Fade Out, Fade In 2

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

Позволь мне объяснить:

У меня есть 2 div, один с очень большим изображением, один с текстом. В идеале я бы хотел, чтобы веб-страница функционировала следующим образом:

  1. ничего на экране
  2. исчезать в div изображения (и я думаю, что сначала может потребоваться некоторое время для загрузки)
  3. затемнение div изображения
  4. ничего на экране (то есть: не кроссфейд)
  5. исчезать в текстовом div
  6. оставьте изображение div там навсегда.

Любые мысли о том, как подойти к этому, будут высоко оценены! Еще раз простите мое невежество.


javascript jquery fadein fadeout
person user713717    schedule 18.04.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Поскольку изображение может быть большим, подключите к изображению событие .load(), которое будет запущено после успешной загрузки изображения. Оттуда просто используйте функцию обратного вызова в .fadeOut() и .fadeIn(), чтобы показать/скрыть ваши div.

$(function() {
    $(".image img").load(function() {
        $(".image").fadeIn("slow", function() {
            $(this).fadeOut("slow", function() {
                $(".text").fadeIn("slow");
            });
        });
    });
});

Пример кода на jsfiddle

person Mark Coleman    schedule 18.04.2011

arrow_upward
1
arrow_downward 

$(document).ready(function(){

  $('#id-of-img').fadeIn(5000).delay(5000).fadeOut(5000); // 5000 is 5 seconds, change this as you wish
  $('#id-of-text').fadeIn(5000);

});

Для этого требуется jQuery 1.4.2 или выше для функции delay().

-- редактировать --

Просто перечитайте свой вопрос. Вы говорите «оставить элемент изображения там навсегда», вы имели в виду текстовый элемент? Если да, то то, что я сделал, должно работать, если нет, то я действительно не знаю, что вы имеете в виду.

person Scott Brown    schedule 18.04.2011

arrow_upward
0
arrow_downward

Использование обратных вызовов событий

Вы хотите загрузить изображение таким образом, чтобы обеспечить обратный вызов после завершения предварительной загрузки:

var $textDiv = jQuery('.textDiv'); // contains the text

var img = new Image();
img.src = "images/myImageUrl.jpg";
img.onload = function() {
    jQuery(this).hide().appendTo('.imgDiv').fadeIn(300, function(){
        $(this).fadeOut(300, function() {
            $textDiv.fadeIn(300);
        }
    });

};
person typeof    schedule 18.04.2011