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的{{1}}。如果是，请尝试以下，

#sliderArrow

Answer 2

引用OP：

“我做错了什么？”

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

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


持续时间 - 确定动画运行时间的字符串或数字。

缓动 - 一个字符串，指示要用于转换的缓动函数。

回调 - 动画完成后调用的函数。

修改

在阅读其他答案后，我发现有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，绝对不需要任何内联JavaScript ，如<a href="#" onclick="togglethis()">。您的HTML应该看起来像 ......

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

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

jsFiddle DEMO

Answer 3

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

jQuery切换不断重复

3 个答案: