0

私はJqueryを初めて使用しますが、ここで必要なことを実行する必要があると思います。

クライアントは、ホームページがロゴ画像のみが表示された状態で始まり、1秒ほど後にホームページのナビゲーションとコンテンツにフェードインすることを望んでいます。ロゴ画像は中央（垂直および水平）に表示されます。同時に、ロゴが表示されている間、ホームページはグレースケールとして背景に表示されます。

4

2 に答える 2

0

他のすべての上に画像を作成します。これは、位置を絶対にすることで実行でき、場合によってはz-indexを調整します。画像とIDを指定します。

animate（）関数をチェーンして、必要な効果をそこに入れることができます。

$( "#block1" ).animate({opacity: 100%;},1000).animate({opacity: 0%;},1000);

アニメーションの後で、画像が表示されないように（または画像の下にあるものをクリックできないように）画像を削除したいからです。

したがって、アニメーションの代わりにトグルを使用できます（ただし、トグルはその効果の一部として高さと幅も調整します）。

$( "#block1" ).toggle(1000);

最初に画像のみを表示するには、他のすべてをdiv内に配置し、display：noneincssに設定します。次に、コールバック（.toggle（[duration] [、callback]）at http://api.jquery.com/toggle/）を設定します。そして、コールバックの場合、他のすべての表示をオンに戻す関数を宣言します。

$( "#block1" ).toggle(1000, function () {
  $("#everythingelse").css("display: inline");
});

または、アニメーション機能を使用して表示をnoneに設定できます。

$( "#block1" ).animate({opacity: 0%;},1000,"linear", function () {
  $( "#block1" ).css("display: none");
  $("#everythingelse").css("display: inline");
});

animate（詳細についてはhttp://api.jquery.com/animate/を参照）を使用すると、その効果をよりカスタムで制御できます。

于 2012-08-19T01:46:57.327 に答える
0

アニメーション関数内でコールバック関数を使用します。このチュートリアルをご覧ください... http：//cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/

于 2012-08-19T02:01:22.337 に答える