Как добавить эффект затухания в следующий js-скрипт?

#javascript #jquery #fadein

Вопрос:

У меня есть js-скрипт, который показывает загружаемое изображение, а затем загружает содержимое #content div . Он работает нормально, но я не могу понять, как сделать так, чтобы он исчезал в содержимом после его загрузки?

 function viewHome(){
    $('#woodheader').load("inc/home.php");
    $('#content').html('<span class="loader">Loading..amp;nbsp;amp;nbsp;amp;nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/home.php");
}

Например, по .load("inc/home.php"); завершении я хотел бы затухать в содержимом inc/home.php файл длительностью 3 секунды. Как я могу это сделать?

Ответ №1:

 function viewHome() {
    $('#woodheader').load("inc/home.php");
    var content = $('#content');
    content.html('<span class="loader">Loading..amp;nbsp;amp;nbsp;amp;nbsp;"  
        "<img class="loaderimg" src="images/ajax_loader.gif"/></span>');
    content.load("inc/home.php", function () {
        content.hide().fadeIn(3000);
    });
}

1. По личным предпочтениям мне нравится добавлять $ к переменным, которые являются объектами jQuery. Лайк var $content = $('#content'); — проголосовал за лучший ответ.

2. Что-то вроде новой венгерской нотации. Вероятно, это хорошая практика, но мне еще предстоит перенять ее лично… Посмотрим. 🙂

Ответ №2:

Используйте opacity:0 из css (и filter:alpha(opacity= 0) для ie) в #content

а затем добавьте $(«#content»).fadeIn(продолжительность) в вашу функцию

1. пробовал, вообще не показывает никакого содержимого, я думаю, непрозрачность остается 0 для содержимого div. Я не думаю, что мне нужно устанавливать непрозрачность на 0 для содержимого, может ли это быть другой div в inc/home.php может быть, файл?

2. я прочитал это неправильно, вы помещаете это в div, в который загружаете html 🙂

Ответ №3:

с помощью jquery поместите свой код в это

 $(document).ready(function() {
    // put jquery fade call in here
});

Используйте функцию jquery

 $("#element").fadeIn(350);