0

重複の可能性:
この jQuery を自分の持っているものよりも速くするにはどうすればよいですか?

現在、このスクリプトを一種の「タブ」システムに使用しています。1 つのタブをクリックすると、他のすべてのタブが非表示になります。それらはすべてdivです。しかし、現時点では、選択した div が読み込まれる前にフェードアウトする速度が十分ではないと思います。選択されて現在表示されているdivの下に移動してしまいます。

ご覧のとおり、クリックしたときにそれぞれの「_s」divを開きたい5つのタブがあるため、トグルは必要ありません。フェードアウト、フェードイン。

フェードインの前にフェードアウトを発生させる方法、または遅延を追加する方法はありますか? このスクリプトに遅延を追加する方法や、新しい div がフェードインする前に div が完全にフェードインすることを確認する方法がわかりません。

数日前に同じ質問を投稿しましたが、まだ正しい答えが見つかりません。

タブをシャッフルするための現在の作業スクリプトは次のとおりです。スタックはそれを奇妙にフォーマットしています。投稿を編集し、必要に応じて読んでください。

何かが起こる前に、最初のタブを除くロード中のすべての div を非表示にする別のスクリプトを作成しました。これをソリューションに統合して、100 のスクリプトを使用しないようにすることはできますか? ソースは次のとおりです。

    <script>
  $(document).ready(function () {
  $('#campus_infotab_two_s,#campus_infotab_three_s,#campus_infotab_four_s,#campus_infotab_five_s').hide();
});
  </script>

Now here's the script that controls the "tabs."

    <script>
$("#teach_one").click(function() {
    $("#teach_one_s").fadeIn("slow");
    $("#teach_two_s").fadeOut("fast");
    $("#teach_three_s").fadeOut("fast");
    $("#teach_four_s").fadeOut("fast");
    $("#teach_five_s").fadeOut("fast");
});

$("#teach_two").click(function () {
    $("#teach_two_s").fadeIn("slow");
    $("#teach_one_s").fadeOut("fast");
    $("#teach_three_s").fadeOut("fast");
    $("#teach_four_s").fadeOut("fast");
    $("#teach_five_s").fadeOut("fast");
});

$("#teach_three").click(function () {
    $("#teach_three_s").fadeIn("slow");
    $("#teach_one_s").fadeOut("fast");
    $("#teach_two_s").fadeOut("fast");
    $("#teach_four_s").fadeOut("fast");
    $("#teach_five_s").fadeOut("fast");
});

$("#teach_four").click(function () {
    $("#teach_four_s").fadeIn("slow");
    $("#teach_one_s").fadeOut("fast");
    $("#teach_two_s").fadeOut("fast");
    $("#teach_three_s").fadeOut("fast");
    $("#teach_five_s").fadeOut("fast");
});

$("#teach_five").click(function () {
    $("#teach_five_s").fadeIn("slow");
    $("#teach_one_s").fadeOut("fast");
    $("#teach_two_s").fadeOut("fast");
    $("#teach_three_s").fadeOut("fast");
    $("#teach_four_s").fadeOut("fast");
});
</script>

さて、これはそれがきれいにするHTMLです:

<ul class="noselect teach_home_navigator_tabs">

スタッフフ スタッフフ スタッフフ スタッフフ スタッフフ

ここに私が持っていたいくつかの提案がありますが、どれもうまくいきません。ハンターが提供するものはうまくいくようですが、どこかに構文エラーがあり、診断するのにjqueryが得意ではありません。ありがとうございました！

このjQueryを私が持っているものよりも速くするにはどうすればよいですか?

4

1 に答える 1

0

これはハンターのエラーを取り除くために修正されたコードです。http://www.jslint.comを使用して問題を見つけました。

$(function(){
    $(".infotab").hide(); // hide all content on load

    $("#teach_home_navigator_tabs li").click(function(e){
        var id = this.id;
        var $current = $("#infotab:visible"); // get the currently selected tab
        if ($current.length === 0) {           
            $current.fadeOut("fast", function() { // fade out current
                $("#" + id + "_s").fadeIn("slow"); // fade in selected
            });
        }
        else { $("#" + id + "_s").fadeIn("slow"); } // fade in selected if no current
    });

    $(".teach_home_navigator_tabs li:first").click(); // click first tab on load
});

試してみてください。ただし、すでに多くの回答が得られた質問があるので、まったく同じことについて別の質問をするべきではなかったでしょう。回答を得るには、古い質問にコメント/編集を残す必要があります。

于 2011-03-24T03:19:20.493 に答える