jQuery切换不断重复

我对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

引用作品：

“我做错了什么？”

根据，您的语法是错误的。

toggle（）

中不能有两个回调函数

.toggle（[duration][，easing][，callback]）

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

---

编辑：

在阅读了其他答案后，我发现有

.toggle（处理程序（eventObject），处理程序（eventObject）[，处理程序（eventObject）]）

• 处理程序（eventObject）-每次单击元素时都要执行的函数
• 处理程序（eventObject）-每次单击元素时都要执行的函数
• 处理程序（eventObject）单击后循环使用的其他处理程序

正确实现后，jQuery应该如下所示

---

对于jQuery，完全不需要任何内联JavaScript，就像我前面的评论中的

据我所知，.toggle只有一个回调函数。不确定
当你有两个这样的函数时会发生什么。。不管怎样，你是什么
你想在这里取得成功吗

阅读更多

我假设您正在尝试显示和隐藏
（单击
#sliderArrow
）的
onclick
。如果是这样的话，请尝试下面的方法

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

还有一个事件处理程序版本的.toggle（）

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

据我所知，
.toggle
只有一个回调函数。不确定当你有两个这样的函数时会发生什么。。不管怎样，你想在这里实现什么？将此函数绑定到单击事件实际上会单击按钮两次，一次用于单击，一次用于切换。这就是为什么你会看到它向两个方向滑动。请包含你的相关HTML，这样我们就可以更多地了解这个函数到底在做什么。奇怪的是，我从另一个网站上得到了这个语法，它建议你如何在两个函数之间切换。不过，我想做的是，让一个div在第一次单击时向右移动235px，然后在下一次单击时返回0px，ad nauseum。看起来像是很初级的东西，但是，好吧，那就是我。哎呀，我想我应该在最后一篇文章中添加@Sparky672。@gyzhor，在回答用户自己的答案或问题时，你不需要
@user
。另请查看我编辑的答案，并在原始问题中包含更多HTML。不，这似乎有相同的问题，只是不是只重复一次，而是在每次单击时重复一次（第一次单击时为零，第二次单击时为一次，第三次单击时为两次，等等）。也许现在可以忽略图像交换-我所要做的就是在第一次单击时使用相同的可单击div将其位置向左移动，然后在第二次单击时将其位置向右移动。有趣的是，如果您插入一个不存在的函数，如$（this）.harumph（），我的原始代码就可以正常工作；中断函数。很遗憾，它抛出了一个错误。那么这与我最初发布的内容基本相同，只是在togglethis（）函数之外？当我将其放置在原始函数之外时，似乎没有获得任何功能。您是否将原始函数绑定到单击事件？你能发更多的代码吗？哎呀，我刚看到你的小提琴。其他地方一定有问题。让我检查一下…我正在使用作为我的点击事件。这就调用了它，但它仍然存在我前面提到的重复问题。@gyzhor，这就完全解释了你做错了什么，以及你在原始操作中遗漏了什么。绑定事件时，你不需要内联JavaScript。换句话说，如果使用jQuery将单击事件绑定到对象，则在
中也不会使用
onclick=
。
   $(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");
          }
       });
   });

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