Как медленно FadeOut изображение при загрузке с помощью jQuery

Question

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

Я уверен, что это немного, но я новичок в кодированиии поэтому я борюсь.

Я понял, что мне нужно иметь видимость CSS: скрытый;(не уверен, нужно ли мне поместить это в jquery, или в настоящий css, или в оба), поскольку я хочу, чтобы другие элементы на моей странице не прыгали, когда изображение полностью исчезает.

NB заменили изображение на текств jsfiddle

http://jsfiddle.net/cress/BdHmG/1/

Answer 1

попробуйте это:

$(document).ready(function(){     
    $('#namefade').fadeOut(5000);

});

http://jsfiddle.net/BdHmG/7/

Answer 2

Вам нужно сделать что-то вроде этого.

http://jsfiddle.net/BdHmG/4/

Я обертываю свой контент, который постепенно исчезает внутри div.Затем я устанавливаю высоту этого div на высоту любого размера вашего изображения.

Просто чтобы вы знали:

• visibility:hidden скрывает элемент, но сохраняетего форма
• display:none скроет элемент и свернет его форму

Answer 3

Попробуйте следующее

$(document).ready(function(){     
    $('#namefade').fadeOut('slow', function() { $(this).css({visibility: 'hidden', opacity: 0})});
});

Отличается от того, что у вас было:

• используйте $(document).ready() вместо $(window).load()
• затухания перед изменением css
• изменить css в обратном вызове в конце анимации, а не сразу

Функция .fadeOut() принимает необязательный второй параметр, который, если он определен и является функцией, будет вызванв контексте каждого элемента, который закончил исчезать.Это верно для всех анимационных функций jQuery.