0

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

4

3 回答 3

1

根据我之前的评论，

据我所知， .toggle 只有一个回调函数。不知道当你有 2 个这样的功能时会发生什么。无论如何，你想在这里实现什么？

阅读更多.toggle API 文档

我假设您正在尝试显示和隐藏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");
          }
       });
   });
于 2012-04-06T21:15:10.407 回答
0

引用操作：

“我究竟做错了什么？”

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

.toggle（[持续时间] [，缓动] [，回调]）

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

编辑：

阅读其他答案后，我看到还有另一个版本的 jQuerytoggle() ...

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

.toggle（处理程序（事件对象），处理程序（事件对象）[，处理程序（事件对象）]）

  • 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()">. 您的 HTML 应该类似于...

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

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

jsFiddle 演示

于 2012-04-06T21:08:47.443 回答
0

还有一个 .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");
    }
);
于 2012-04-06T22:08:43.433 回答