2012-06-04 95 views
0

我目前正在製作一個網站,其中包含的菜單導航幾乎與fotopunch.com中找到的菜單幾乎相同,而不是指向它的點。無論如何,我寫了代碼使用jquery/JavaScript的菜單,它的工作原理,但也有一個小錯誤,也發生在fotopunch網站。 當您將光標從一個菜單項移動到另一個菜單項並重復返回時,會暫時使顯示屏失靈。有沒有辦法來解決這個問題?我將包含我的JavaScript文件的一部分,以便您可以查看我爲每個菜單項所做的操作。jquery菜單幻燈片錯誤

$("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。我試圖添加超時但不成功。 修復此錯誤的最佳方法是什麼?它足夠小,不會成爲一個重要的優先事項,但它會更好地工作。謝謝。

+0

您是否嘗試過http://api.jquery.com/stop/? – j08691

+0

很酷。停止功能確實修復了它。但是當來回移動時,箭頭仍然滯後。 – fudge22it

回答

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 

     }