Jquery "toggle"方法行为异常

Question

我有一段代码是这样的:

$(".ani-search").toggle(
    function(){
        $("#header .logo a").animate({
            marginLeft: "-=30px",
            marginLeft: "-=60px",
            marginLeft: "-=90px"
        });
    },

    function(){
        $("#header .logo a").animate({
            marginLeft: "-=60px",
            marginLeft: "-=30px",
            marginLeft: "0px"
      })
   }
);

当我运行相应的 html 页面时，我没有收到任何 VALID 切换响应。当我打开页面时，带有“ani-search”类的图像会闪烁一次然后消失，就是这样，我无法切换任何东西？为什么会这样？

同样这里还有一个测试代码"

<p>Hello world</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.0.js"><\/script>')</script>
<script>
    $("p").toggle(
        function(){
            alert("Cliclk 1");
        },
        function(){
            alert("Click 2");
        }
    );    
</script>

同样的事情发生在这里，当我在浏览器中加载页面时，文本“Hello world”闪烁一次，我收到带有“Click 2”消息的警告框。就是这样。

为什么我不能在这里切换？

Answer 1

已弃用并删除，创建您自己的切换功能:

$(".ani-search").on('click', function() {
    if (!$(this).data('state')) {
        $("#header .logo a").animate({
            marginLeft: "-=30px",
            marginLeft: "-=60px",
            marginLeft: "-=90px"
        });
    }else{
        $("#header .logo a").animate({
            marginLeft: "-=60px",
            marginLeft: "-=30px",
            marginLeft: "0px"
        });
    }
    $(this).data('state', !$(this).data('state'));
});

FIDDLE

请注意，多次添加相同的 CSS 属性不会对其进行多次动画处理，只会使用最后一个。