Chromeで動作するjQueryスクリプト、FireFoxおよびOperaで動作しない

私はChromeで不思議に思うスクリプトを書いたが、OperaやFirefoxでは動作しない。私はjsで新しいです。何が間違っている可能性がありますか?

$(function() {
    $("#question_tab").hover(function() {
        if ($("#question").css("left") == "100%")
            $("#question").css("margin-left", "-50px");
    }, function() {
        if ($("#question").css("left") == "100%")
            $("#question").css("margin-left", "-38px");
    });

    $("#question_tab").click(function() {
        if ($("#question").css("left") == "100%") {
            $("#question").animate({
                marginLeft: "-380px",
                left: "50%"
            });
        } else {
            $("#question").animate({
                marginLeft: "-38px",
                left: "100%"
            });
        }
    });
});

私は問題がチェックしていると思う - if($( "#question").css( "left")== "100%")

HTML, JS and CSS here: http://jsfiddle.net/HjS9z/4/

質問フォームをスライドする問題。

1
あなたはあなたのhtmlも投稿できますか?それなしで問題を再現するのは難しいです。
追加された 著者 Justin808,
スクリプトのどの部分がFFやOperaで動作しないのですか? JSエラー?
追加された 著者 dSquared,
jsFiddle を投稿するのが最善の選択肢です。
追加された 著者 mc10,
"100%" ($(document).width()/ 2)の代わりに $(document).width() > "50%"の代わりに
追加された 著者 noob,

2 答え

If found solving of my problem here: jquery if else condition for CSS api

私は隠されたフォームのために "隠された"クラスを追加します。作業コード:

$(function() {
    $("#question_tab").hover(function() {
        if ($("#question").hasClass("hidden"))
            $("#question").css("margin-left", "-47px");
    }, function() {
        if ($("#question").hasClass("hidden"))
            $("#question").css("margin-left", "-36px");
    });

    $("#question_tab").click(function() {
        if ($("#question").hasClass("hidden")) {
            $("#question").animate({
                marginLeft: "-380px",
                left: "50%"
            });
            $("#question").removeClass("hidden");
        } else {
            $("#question").animate({
                marginLeft: "-36px",
                left: "100%"
            });
            $("#question").addClass("hidden");
        }
    });
});
1
追加された

デバッグはここであなたの親友になります(JSの初心者はalert()を使うことができますし、ブレークポイントを設定するかconsole.log()を使う方が良いでしょう)

**他の読者のために私はalert()が好まれていないことを知っています、私は単にJSとデバッグの初心者向けのオプションを与えています

たとえば、 $( "#question")。css( "left")の値はクロムでは100%となりますが、Firefoxでの値はピクセル単位で定義されます(837px例えば)。したがって、あなたのコードが他のブラウザで失敗する理由は、あなたの "IF"文が決して真(一致)に解決されないからです。

0
追加された
おそらくより良い解決策は、あなたのポジショニングのためにクラスを使用することです、そして、あなたのjQueryロジックはクリック/ホバーイベントのためにクラスを単に交換することができます。 EX:.qHoverOn .qHoverOff .qShow .qHide etc ...この方法では、アイテムを100%または-38pxなどにマップするのではなく、どこに配置するかを指定するだけです。
追加された 著者 Betard Fooser,
@arturtrに問題はありません。私の答えは、あなたを助けたように見えるので、受け入れてください。将来的に他の人たちもあなたを助けることを奨励します。
追加された 著者 Betard Fooser,
Betard、アドバイスをいただきありがとうございます。
追加された 著者 arturtr,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript