0

メッセージを (php 経由で) 受信したときに Web アプリのステータス バーを拡大し、数秒後に元の高さに戻そうとしています。

ページの読み込み時に適用される CSS は次のとおりです。

<style>

      #status {

        height:17px;
        background-color:#424242;
        -moz-transition:height 1s;
        -webkit-transition:height 1s;

        }

    #status:hover {

        height:60px;

     }

</style>

ユーザーがメッセージを受信したときに呼び出されるコードは次のとおりです。

<script>

    $('#status').css('height', '60px');
    $('#status_message').text('$message').show();
    $('#status').delay(1000).css('height', '17px');

 </script>

ただし、2 つの問題があります。1 つ目は、スクリプトの最後のステートメントを取り出すとすべてが機能するため、delay() 呼び出しが何かを台無しにしていると思います。次のように、2番目のステートメントの最後に移動しようとしました:

<script>

    $('#status').css('height', '60px');
    $('#status_message').text('$message').show().delay(100000);
    $('#status').css('height', '17px');

 </script>

しかし、それもうまくいきません。私が抱えている 2 番目の問題は、上記のコードを実行すると、ステータス バーの元の css ホバー イベントが機能しないことです。$.css() 関数を使用して、ステータス バーの元の css をすべて再指定しようとしましたが、それでも機能しません。#status:hover イベントを jQuery で再適用できないことに関係していると思いますが、 .hover() で同じ動作を実装しようとしても、まだ機能しません。

何か案は？

4

2 に答える 2

1

単に使用しないのはなぜsetTimeoutですか？

setTimeout(function()
{
     $('#status').css('height': '17px');
}, 1000);
于 2012-04-17T18:44:30.400 に答える
0

最初の問題は、jquery で .css を使用すると、実際にインライン スタイルが適用されることです。

これを回避するには、新しい CSS を新しいクラスに配置します。たとえば、次のようになります。

#status.dynamic{
    height:60px;
}

そしてあなたのjs：

    $('#status').addClass('dynamic');
    //$('#status_message').text('$message').show().delay(100000);
    $('#status').removeClass('dynamic');

遅延に関しては、最後に置いても何も遅延しません。動作することを確認したい場合は、次のように試してください。

$('#status_message').text('$message').show().delay(1000).fadeOut();
于 2012-04-17T18:48:20.310 に答える