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"); 
    } 
);