1

これは私のマークアップ構造です:

<div class="authentication">
  <div class="form-inputs"></div>
</div>

ページの読み込み時に、認証の色が上から下にスライドするようにしたかったのです。色は最初は白で、青が上から下にスライドするはずです。（ヘッダーの色が本文を塗りつぶすように）。

私はこれを試しました：

<script>
  jQuery(document).ready(function($) {
    $('.authentication').animate({backgroundColor: '#4BC5DA'}, 3000);
  });
</script>

しかし、フェードイン効果があります:(

色の変更後、「フォーム入力」がフェードインする必要があります...アクションを連鎖させる必要があることはわかっていますが、正確には取得できません。

4

3 に答える 3

2

jquery animate()から

アニメーション化されたすべてのプロパティは、以下に示す場合を除き、単一の数値にアニメーション化する必要があります。数値でないほとんどのプロパティは、基本的な jQuery 機能を使用してアニメーション化できません (たとえば、width、height、またはleftはアニメーション化できますが、 jQuery.Color()プラグインを使用background-colorしない限り、アニメーション化できません)。特に指定がない限り、プロパティ値はピクセル数として扱われます。単位は、該当する場合に指定できます。em%

更新( css を使用)

.authentication {
    width: 100%;
}
body:hover .authentication{
    height: 100%;
    background-color: #4BC5DA;
    -webkit-transition: background-color 3s ease, height 3s ease;
    -moz-transition: background-color 3s ease, height 3s ease;
    -o-transition: background-color 3s ease, height 3s ease;
    -ms-transition: background-color 3s ease, height 3s ease;
    transition: background-color 3s ease, height 3s ease;
}
body, html {
    width: 100%;
    height: 100%;
}

働くフィドル

上記のフィドルには、カーソルをウィンドウの外に移動して再度ホバーするたびに、スライド効果が繰り返し表示されるという欠点があります。( javascript/jquery を使用して設定できます)。

jquery を使いたい場合は、上記の koala_dev のコメントを確認してください。

于 2013-09-04T06:26:04.950 に答える
1

アニメーションで動的オーバーレイをslideDown()使用し、コールバック引数を使用してアニメーションが完了したときにフォームをフェードすることができます。

$blue = $('<div>').css({
    background: 'blue',
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: '0',
    display: 'none'
}).appendTo('.authentication').slideDown('slow', function(){
    $('.form-inputs').fadeIn();
});

デモフィドル

「よりスムーズな」アニメーションが必要な場合は、jQuery UI のイージング関数を調べると、それらのいずれかをパラメーターとして使用できますslideDown()(もちろん、プロジェクトに jQuery UI を含める必要があります)。または、スライド効果とフェードを組み合わせることができます。効果、例はこちら

于 2013-09-04T07:35:30.137 に答える