Jquery“toggle”方法表现得很糟糕

我有一大堆这样的代码：

$(".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”类的图像闪烁一次然后消失了，我不会切换任何东西？ 为什么会这样？

同样，这是另一个测试代码“

 
Hello world
  window.jQuery || document.write('')  $("p").toggle( function(){ alert("Cliclk 1"); }, function(){ alert("Click 2"); } );  

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

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

Answer 1

不推荐使用和删除，创建自己的切换function：

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

小提琴

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

Answer 2

toggle消失了。 您可能希望使用data属性来自己执行此操作：

 $("p").on("click", function () { if ($(this).data("click")) { alert("Click 2"); $(this).data("click", false); } else { alert("Cliclk 1"); $(this).data("click", true); } });