jQuery切換不斷重複

Question

我對jQuery相當陌生，但看起來像是一件容易的事。同樣的，我無法弄清楚。 我試圖在兩個動畫函數之間切換，但是當函數2完成時，它繼續並調用函數1。

function toggleThis(){ 
    $("#navSliderArrow").toggle(function() {  
     $(this).animate({ marginLeft: '235' }, 500); 
     $("#sliderArrow").attr("src", "images/hide_nav.gif"); 
    }, function() {  
     $(this).animate({ marginLeft: '0' }, 500); 
     $("#sliderArrow").attr("src", "images/show_nav.gif"); 
    }); 
} 

我在做什麼錯？ 〜GYZ

Answer 1

報價OP：

「我在做什麼了？」

根據the jQuery documentation，您的語法錯誤。 toggle()內不能有兩個回調函數。

.toggle（[時間] [，緩和] [，回調]）

• 持續時間 - 一個字符串或數字決定動畫將運行多久。
• easing - 一個字符串，指示用於轉換的緩動函數。
• 回調 - 動畫完成後調用的函數。

---

編輯：

閱讀其他的答案後，我看到有another version of jQuery toggle() ...

http://api.jquery.com/toggle-event/

.toggle（處理器（ eventObject），處理程序（eventObject）[，處理程序（eventObject）] ）

• 處理程序（eventObject）傳遞 - 要執行被點擊的元件每一個偶數時間的函數。
• handler（eventObject） - 單擊元素時每執行一次奇數時間執行的函數。
• 處理程序（事件對象） - 其他處理程序在點擊後循環。

執行得當，你的jQuery應該像像這個...

$(document).ready(function() { 
    $("#navSliderArrow").toggle(
     function() {  
      $(this).animate({ marginLeft: '235' }, 500); 
      $("#sliderArrow").attr("src", "images/hide_nav.gif"); 
     }, 
     function() {  
      $(this).animate({ marginLeft: '0' }, 500); 
      $("#sliderArrow").attr("src", "images/show_nav.gif"); 
     } 
    ); 
}); 

並與jQuery的，也絕對不需要任何內嵌JavaScript像<a href="#" onclick="togglethis()">。你的HTML應該看起來像類似 ...

<a href="#" id="navSliderArrow"> 

我只能說「像」，既然你的HTML不包含在你的OP，我不知道你的目標元素應該是。

jsFiddle DEMO

Answer 2

從我的意見的前面，

據我所知，.toggle只有一個回調函數。不知道 當你有2個功能時發生了什麼..反正，你試圖在這裏存檔的是什麼 ？

更多.toggle API doc

我假設你正在試圖顯示和隱藏的#sliderArrowonclick。如果是這樣那麼試試下面，

$(function() { 
     var $slideArrow = $("#sliderArrow"); 
     var $navSlideArrow = $('#navSliderArrow'); 
     $slideArrow.on ('click', function() {    
      if ($slideArrow.attr('src').indexOf('show') >= 0) { 
       $navSlideArrow.animate({ marginLeft: '235' }, 500); 
       $slideArrow.attr("src", "images/hide_nav.gif"); 
      } else { 
       $navSlideArrow.animate({ marginLeft: '0' }, 500); 
       $slideArrow.attr("src", "images/show_nav.gif"); 
      } 
     }); 
    }); 

Answer 3

還有.toggle的事件處理程序的版本（） - http://api.jquery.com/toggle-event/

撥動事件處理程序結合的Click方法本身，所以你只需要直接執行動畫：

$("#navSliderArrow").toggle(
    function() {  
     $(this).animate({ marginLeft: '235' }, 500); 
     $("#sliderArrow").attr("src", "images/hide_nav.gif"); 
    }, 
    function() {  
     $(this).animate({ marginLeft: '0' }, 500); 
     $("#sliderArrow").attr("src", "images/show_nav.gif"); 
    } 
);