アニメーションでJQuery関数が不思議に動作する

Question

かなりシンプルな関数を書くのです。基本的には、いくつかのリンクがあるナビゲーションバーがあります。クリックすると、各リンクに以前表示されていたdiv：なしが表示されます。リンクをクリックすると、ナビゲーションバーが縮小して上に移動します。これは動作していますが、少し問題があるようです。

ナビゲーションバーのCSSを含む2つのクラスがあります。 "Before"はリンクがクリックされる前にナビゲーションバーのCSSを持つクラスです。 「After」はリンクがクリックされた後のもので、ナビゲーションバーが小さくなり、上に移動します。ナビゲーションバーのリンクにも同様のクラスがあります。

機能に継続時間を追加すると問題が発生します。ナビゲーションバーのクラスを "after"から "before"に変更し、開いているすべての "page"を閉じる "return"というリンクが1つあります。他のリンクがクリックされる前に、ナビゲーションバーに「after」クラスが追加される前にこのリンクをクリックすると、「after」クラスが追加されて削除されたようにナビゲーションバーが移動し、小さくなってから大きくなります再び。私はクリックされたときに何もしないで "戻る"リンクをし、ナビゲーションバーはまだ "前"の状態にします。

今の私のコードは次のとおりです。右のクラスが存在している場合にのみ実行されますので、私はとても機能を実行するとき、私は.hasClassを使用して関数にif文を追加しようとしました

$(document).ready(function(){ 
    $("#main_index a").click(function(){ 
     $("#main_index").addClass("after", 500); 
     $("#main_index a").addClass("after_link", 500); 
    }); 
}); 

$(document).ready(function(){ 
    $(".return").click(function(){ 
     $("#main_index").removeClass("after", 500); 
     $("#main_index a").removeClass("after_link", 500); 
    }); 
}); 

もはや動作しません。このコードは次のとおりです。私もここにものを探してみましたが、何もこれまで働いていない

$(document).ready(function(){ 
    $("#main_index a").click(function(){ 
     if(("#main_index").hasClass("before")) { 
      $("#main_index").addClass("after", 500); 
      $("#main_index a").addClass("after_link", 500); 
     } 
    }); 
}); 

$(document).ready(function(){ 
    $(".return").click(function(){ 
     if("#main_index").hasClass("after")) { 
      $("#main_index").removeClass("after", 500); 
      $("#main_index a").removeClass("after_link", 500); 
     } 
    }); 
}); 

。私はどこかでコードを台無しにしてしまいましたが、JQueryを使った初心者です。なぜ私がやっていることがうまくいかないのか分かりません。どんな助けもありがとう。

Answer 1

場合は間違っています。 あなたは2つの準備が必要ではありません。 そして.... Addclassには1つのアキュムトしか必要ありません。この

$(document).ready(function(){ 
    $("#main_index a").click(function(){ 
     //if(("#main_index").hasClass("before")) 
      if($("#main_index").hasClass("before")) { 
      //$("#main_index").addClass("after", 500); 
      $("#main_index").addClass("after"); 
      //$("#main_index a").addClass("after_link", 500); 
      $("#main_index a").addClass("after_link"); 
     } 
    }); 
    $(".return").click(function(){ 
     //if("#main_index").hasClass("after")) { 
      if($("#main_index").hasClass("after")) { 
      //$("#main_index").removeClass("after", 500); 
      $("#main_index").removeClass("after"); 
      //$("#main_index a").removeClass("after_link", 500); 
      $("#main_index a").removeClass("after_link"); 
     } 
    }); 
}); 

チェックはここでは、アニメーションをしたい場合は、addClassを使用していないJsfiddle Sample

です。 私が思うに、あなたは（私はそれを見ていないと信じてすることはできません）animate

Answer 2

明白な問題と解決策を使用する必要がある - 最初の関数は、「main_index A」と呼ばれていたのでmain_index」内のリンクを有する第二両方から呼び出されたため、両方の機能を実行していました。他のリンクにクラスを追加し、単に "main_index a"ではなく最初の関数のクラスを呼び出し、問題を修正しました。