0

私は現在、下向きではなく、fotopunch.comにあるものとほぼ同じメニューナビゲーションを含むWebサイトを作成しています。とにかく、メニューにjquery / javascriptを使用してコードを記述しましたが、動作しますが、fotopunchサイトでも発生する小さなエラーがあります。カーソルをあるメニュー項目から別のメニュー項目に移動したり、元に戻したりすると、一時的に表示が混乱します。これを修正する方法はありますか？各メニュー項目に対して何をするかを確認できるように、javascriptファイルの一部を含めます。

$("div#menu .reps").hover(function() {
    //if the current slide is not reps
    if(current_slide != "reps"){
    //move the arrow to the corresponding position for the reps slide 
        $(".arrow").animate({"left":"135px"});//move the arrow
        //(test which slide it is.)
        if(current_slide == "clients"){
            //fade out & hide the current slide
            $(".clients_display").fadeOut().hide();//hide the current slide
            //show the reps slide & fade in
            $(".reps_display").fadeIn().show();//show the slide
            //the current slide is the reps slide
            current_slide = "reps";
        }
        else if(current_slide == "services"){
            //fade out & hide the current slide
            $(".services_display").fadeOut().hide();//hide the current slide
            //show the reps slide & fade in
            $(".reps_display").fadeIn().show();//show the slide
            //the current slide is the reps slide
            current_slide = "reps";
        }
        else{
            //fade out & hide the current slide
            $(".training_display").fadeOut().hide();//hide the current slide
            //show the reps slide & fade in
            $(".reps_display").fadeIn().show();//show the slide
            //the current slide is the reps slide
            current_slide = "reps";
        }
    }
});

メニュー項目ごとにこれを行います（4つあります）。問題は、フェードアウトしてフェードインするときに発生すると思います。同時に多くのことを実行しようとすると、2つのメニューdivが同時に表示されるためです。タイムアウトを追加しようとしましたが、失敗しました。このエラーを修正する最良の方法は何ですか？それは大きな優先事項ではないほど十分に小さいですが、それがより良く機能するようにするといいでしょう。ありがとう。

4

1 に答える 1

0 
if(current_slide == "clients"){

            $(".clients_display")stop(true, true).fadeOut().hide();

            $(".reps_display").stop(true, true).fadeIn().show();

            current_slide = "reps";

        } else if(current_slide == "services"){

            $(".services_display").stop(true, true).fadeOut().hide();

            $(".reps_display").stop(true, true).fadeIn().show();

            current_slide = "reps";
        } else{

            $(".training_display").stop(true, true).fadeOut().hide();//hide the current slide

            $(".reps_display").stop(true, true).fadeIn().show();//show the slide

         }
于 2012-06-04T17:28:57.283 に答える