на jQuery.fadeIn() при загрузке страницы?

Я пытаюсь настроить некоторый код, чтобы у меня был скрытый сначала, но затем исчезает после загрузки страницы.

у меня есть следующий HTML-код:

<div class="hidden">
<p>This is some text.</p>
</div>

тогда у меня также есть этот код CSS, который скрывает <div>.

div.hidden
{
    display: none
}

наконец, у меня есть jQuery:

$(document).ready(function() {
    $('div').fadeOut(1);
    $('div').removeClass('hidden');
    $('div').fadeIn(1000);
});

Я надеялся, что это произойдет в первую очередь .fadeOut () исчезнет, removeClass остановит CSS от его скрытия, а окончательный .fadeIn () вернет его на страницу. К сожалению, это не сработало.

вы можете просмотреть код здесь:Скрипка

так может кто-то пожалуйста, скажите мне, как держать <div> скрыто до загрузки страницы, а затем исчезает с помощью jQuery?

спасибо!

10
css fadein html javascript jquery

4 ответов

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

Он должен быть!--5--> 

$(document).ready(function () {
    $('div.hidden').fadeIn(1000).removeClass('hidden');
});

демо: Скрипка

26

HTML-код:

<div class="toshow" style="display:none;">
    This is some text.
</div>

код jquery:

$(document).ready(function () {
    $('div.toshow').fadeIn(2200);
    // OR $('div.toshow').show(2200);
    // OR $('div.toshow').slideDown("slow");
});

изменить анимацию jQuery show()/hide ()?

4

http://jsfiddle.net/DerekL/Bm62Y/5/

//If you do not want the "hidden" class to be still around
$(function() {
    $('div').fadeIn(1000).removeClass('hidden');
});

//If you don't mind it, then you can just do fadeIn
$(function() {
    $('div').fadeIn(1000);
});
1
//image fade in
    //set image display none
        $("img").css("display", "none");
    //call the image with fadeIn effect
    $("img").fadeIn(5000 , function(){
        $(this).css("display","normal");
    });

я экспериментировал с изображениями .Вы также можете попробовать текст..

0