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属性不会多次设置动画，只会使用最后一个。

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);
    }
});

Jquery“toggle”方法表现得很奇怪

2 个答案: