jquery Избледняване, избледняване, изчезване 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()

-- редактиране --

Просто прочетете отново въпроса си. Казвате „оставете div изображението там за постоянно“, имахте предвид текстовия div? Ако е така, това, което направих, трябва да работи, ако не, тогава наистина не знам какво имате предвид.

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