jQuery切换不断重复

Question

我对 jQuery 还很陌生，但似乎很容易。一样的，我想不通。 我正在尝试在两个动画功能之间切换，但是当功能二完成时，它会继续并调用功能一。

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

根据我之前的评论，

据我所知，.toggle 只有一个回调函数。不确定 当你有两个这样的功能时会发生什么......无论如何，什么是 你想达到这里吗？

阅读更多.toggle API doc

我假设您正在尝试显示和隐藏 onclick 或 #sliderArrow。如果是这样，请在下面尝试，

   $(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 2

还有一个事件处理程序版本的 .toggle() - http://api.jquery.com/toggle-event/

toggle事件处理程序绑定了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");
    }
);

Answer 3

引用 OP：

“我做错了什么？”

根据the jQuery documentation，您的语法错误。 toggle() 内不能有两个回调函数。

.toggle([持续时间] [, 缓动] [, 回调])

• duration - 确定动画运行时间的字符串或数字。
• easing - 一个字符串，指示用于过渡的缓动函数。
• 回调 - 动画完成后调用的函数。

---

编辑：

看了其他答案，发现有another version of jQuery toggle()...

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

.toggle( handler(eventObject), handler(eventObject) [,handler(eventObject)] )

• handler(eventObject) - 每次点击元素时都会执行的函数。
• handler(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，绝对 不需要像 <a href="#" onclick="togglethis()"> 这样的任何内联 JavaScript。您的 HTML 应该看起来 类似于...

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

我只说“类似”，因为您的 HTML 不包含在您的 OP 中，而且我不知道您的目标元素应该是什么。

jsFiddle DEMO