FirefoxとGoogle ChromeでjQueryエフェクトを機能させる方法は？

Question

jQueryとfadeIn <！> amp;をいじっています。 fadeOutエフェクト。メッセージでdivを表示および非表示にする次のコードがあります。

`

<script type="text/javascript">
    $(document).ready(function() {

        $("button").click(function() {
            $("#upd").fadeIn(3000);
            $("#upd").fadeOut(20000);
        });

    });
</script>

<style type="text/css">
    div
    {
        background: rgb(237, 243, 254);
        margin: 0px 0px 5px 0px;
        padding: 13px 30px 13px 30px;
        width: 300px;
    }
</style>

`

Internet Explorerでは完全に動作しますが、クロムでは何もしません。Firefoxでは表示と非表示の動作を取得します。

このライブラリがすべてのブラウザで均等に、または少なくとも近くで動作するための特別なステップはありますか？

Answer 1

fadeOut を試してください。 .jquery.com / Effects / fadeIn＃speedcallback "rel =" noreferrer "> fadeIn 。これにより、次の処理中ではなく、最初の処理が完了すると、後者の効果が確実に実行されます。

$(document).ready(function(){
  $("button").click(function(){
    $("#upd").fadeIn(3000,function(){
      $(this).fadeOut(2500);
    });
  });
});

jQueryは、すべてのブラウザーで単独でほぼ同じように動作するはずです 。奇妙な動作をしている場合、jQueryではなく何か間違ったことをしている可能性があります：）

Answer 2

1つは、最新のjQueryを使用していることと、すべてのブラウザーでJavascriptが有効になっていることを確認してください。

次に、fadeInとfadeOutの呼び出しを連鎖させてみてください：

$("button").click(function() {
    $("#upd")
        .fadeIn(3000)
        .fadeOut(20000);
});

Answer 3

問題は次のとおりです。 $（<！> quot; button <！> quot;）

ボタンのような要素はありません。クラスの場合： $（ '。button'）

...そしてそれがidの場合： $（ '＃button'）