2

我有一大段这样的代码：

$(".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”消息的警报框。就是这样。

为什么我这里不能切换？

4

2 回答 2

3

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

$(".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 属性不会多次对其进行动画处理，只会使用最后一个。

于 2013-07-24T17:18:49.233 回答
1

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);
    }
});
于 2013-07-24T17:21:27.300 回答