jquery - jQueryによるページ読み込み時のCSS遷移

Question

次は非常にうまく機能しますhttp://jsfiddle.net/pDERw/199/、ページの読み込み時にこれを実現するにはどうすればよいですか?現時点ではホバー状態で動作します

div:hover{do something}

score 2 · Accepted Answer

どちらが必要かによって異なりますが、コードを中に入れることができます。

$(document).ready(function(){ //your code here });

またはおそらく：

$(window).load(function(){ //your code here });

1つ目はDOMreadyで実行され（すべての要素がDOMにロードされたとき）、2つ目はすべての画像などがレンダリングされたときに実行されます。

あなたの例を見ると、これを行う最良の方法は、おそらくdiv：hover状態のcssを代わりにクラスに追加し、loadイベントの要素にクラスを追加することです。以下はその一例です。

score 2 · Accepted Answer

このようなハックを作成できます

<body>
    <div class="onLoad"><br /></div>
</body>

div :hover{ ... }スタイルを次のように置き換えます

.onLoad
{
    -webkit-animation: 'zoom' 3s;
    width: 392px;
    height: 285px; 
    right:300px; 
    opacity:0.9; 
}

score 0 · Accepted Answer

私の解決策は、div:hover を .animated_load のような完全に新しいクラスにし、jQuery を使用してページの読み込み時に div にクラスを割り当てることです。

$(document).ready($('#div_id').addClass('animated_load'));

3 に答える 3