jQuery切换不断重复
我对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
从我之前的评论来看，
据我所知，.toggle只有一个回调函数。 不确定当你有两个这样的function会发生什么..不管怎样，你想在这里做什么？
阅读更多.toggle API文档
我假设您正在尝试显示和隐藏#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（）的事件处理程序版本 – 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"); } );
引用OP：
“我究竟做错了什么？”
根据jQuery文档 ，您的语法是错误的。 你不能在toggle()有两个回调函数。
.toggle（[duration] [，easing] [，callback]）
- duration – 确定动画运行时间的字符串或数字。
- easing – 一个字符串，指示要用于转换的缓动函数。
- callback – 动画完成后调用的函数。
编辑：
在阅读其他答案之后，我看到还有另一个版本的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，绝对不需要任何内联JavaScript，如 。 您的HTML应该看起来像 ……
我只说“类似”，因为您的HTML不包含在您的OP中，我不知道您的目标元素应该是什么。
jsFiddle DEMO