ページが開いたときにテキストが自動的に消えますか？

-3

私は個人的なウェブサイトで作業しています。私は自分のページを最初は空白にしたいと思っています。約1秒後にヘッダーがフェードインし、その後、ナビゲーションバーがフェードインします。ページが開いたときにテキストが自動的に消えますか？

私はクリックするだけでフェードインをする方法を学んだので、ページが読み込まれると自動的にフェードインさせる方法についてのヘルプを探しています。

ありがとうございました！

2016-10-14 sparks

https://jsfiddle.net/jxtdgj9s/ – DaniP

animate.cssライブラリーは、このために役に立つかもしれません：ページがアニメーション意志をロードすると

<p class="animated fadeIn">Hello World</p>

：あなたが何をしたいかhttps://daneden.github.io/animate.css/

ライブラリをインストールして、このようないくつかのCSSを記述していますクリックイベントが発生しなくてもすぐに実行されます。ここで

はバイオリンへのリンクです：https://jsfiddle.net/txx00wzr/

は、この情報がお役に立てば幸いです。

出典

2016-10-14 21:16:28 link

あなたはjQueryの.delay$(document).readyでを使用することができます。

$(document).ready(function() { 
     console.log("document ready occurred!"); 
     // Add your animations is here: 
     var myHeader = $('#header'); 
     myHerader.delay(500).fadeIn('300'); 
});

あなたのアニメーションを使用するか、または多分あなたは、あなたのアイテムが隠されたことによって開始する必要がありますanimate.css

出典

2016-10-14 21:16:45

を使用することができ、jQueryの.ready()イベント使用がトリガーします.fadeIn()。 .fadeIn()関数は、アニメーションを連鎖させるコールバックパラメータを受け入れます。あなたはプレーンなJavaScriptを使用したい場合は、私が最初にすべてのbody子供のためのdisplay: none;スタイルを指定することをお勧めしますし、その後onloadイベントを使用すると思い

$(function() { 
 
    $(".header").fadeIn(5000, function() { 
 
    $(".header nav").fadeIn(5000); 
 
    }); 
 
});

.header { 
 
    display: none; 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #ccc; 
 
} 
 

 
.header nav { 
 
    display: none; 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <nav> 
 
    <ul> 
 
     <li>Nav 1</li> 
 
     <li>Nav 2</li> 
 
     <li>Nav 3</li> 
 
     <li>Nav 4</li> 
 
     <li>Nav 5</li> 
 
    </ul> 
 
    </nav> 
 
</div>

出典

2016-10-14 21:19:28 dave

：ここ

は簡単な例です<body onload="fade_in();">
ファンクションfade_in()は、要素を表示可能にする必要があります。私はこのコード行を使用しました：
document.getElementById("<element_id>").style.display = "block";

すぐには表示されずにスムーズに表示されたい場合は、transitionを必要な値に設定してください。

遅れを取るために、ファンクションを使用することができます。setTimeout() on W3Schools

私が正しく理解していれば、解決は簡単です。

出典

2016-10-14 21:25:00 KKastaneda

ページが開いたときにテキストが自動的に消えますか？

答えて

関連する問題