0

問題の言い方がよくわからないので、できる限り説明します。

私は自分のウェブサイトにホームページしか持っておらず、jqueryを使用してメインエリアのコンテンツを動的に変更しようとしています。これが今のところです。

$(document).ready(function(){
    $('#link1').click(function(){
        $("#div2").hide("slide", { direction: "right" }, 500);
        $("#div3").hide("slide", { direction: "left" }, 500);
        $("#div1").delay(501).show("slide", {direction: "down" }, 500);
});

    $('#link2').click(function(){
        $("#div1").hide("slide", { direction: "right" }, 500);
        $("#div3").hide("slide", { direction: "left" }, 500);
        $("#div2").delay(501).show("slide", {direction: "down" }, 500);
});
    $('#link3').click(function(){
        $("#div2").hide("slide", { direction: "right" }, 500);
        $("#div1").hide("slide", { direction: "left" }, 500);
        $("#div3").delay(501).show("slide", {direction: "down" }, 500);
}); });

私の問題は、現在表示されていないdivを非表示にするリンクをクリックすると、divが表示されてから非表示になることです。

どうすればこれと戦うことができますか？

4

1 に答える 1

0

これがあなたの求めているものかどうかわかりません。
例を挙げてフィドルを提供できれば最高です。

div が表示されているかどうかを簡単に確認し、表示されている場合にのみスライド アニメーションを実行できます。

例えば：

$('#link1').click(function(){
    if ($('#div2').is(':visible')){
        $("#div2").hide("slide", { direction: "right" }, 500);
    }

    if ($('#div3').is(':visible')){
        $("#div3").hide("slide", { direction: "left" }, 500);
    }

    $("#div1").delay(501).show("slide", {direction: "down" }, 500);
});

もう1つ、IDの代わりにクラスを使用することをお勧めします。可能な組み合わせをすべて書くのはあまり意味がありません。10 個のリンクがあると想像してください...不要なコードがたくさんあります

于 2013-03-04T21:56:01.203 に答える