jQuery setupSearchButton动画在点击2次后被破坏

Question

我的网站上有一个搜索按钮，我有一个功能，当点击向右移动时，它会为我的输入字段设置动画。如果我点击它然后它会关闭。

只有在打开/关闭2次之后它才会被打破并且不会为任何动画制作动画。我添加了一个console.log();所以我可以看到它在做什么。

这是我的功能。

function setupSearchButton()
{
    j(".icon").click(function() {
        var icon = j(this),
        input = icon.parent().find("#search"),
        submit = icon.parent().find(".submit"),
        is_submit_clicked = false;
        j(".searchform").animate({ "margin-left": "+=180px", "display": "block !important" }, "slow", function(){
            console.log("Move the searchbar to the right 180px;");
        });

        // Animate the input field
        input.animate({
            "width": "165px",
            "opacity": 1
        }, 300, function() {
            input.focus();
        });

        submit.mousedown(function() {
            is_submit_clicked = true;
        });

        // Now, we need to hide the icon too
        icon.fadeOut(300);

        input.blur(function() {
            if(!input.val() && !is_submit_clicked) {
                input.animate({
                    "width": "0",
                    "padding": "0",
                    "opacity": 0
                }, 200);
                // Get the icon back
                icon.fadeIn(200);
                j(".searchform").animate({ "margin-left": "-=180px", "display": "block !important" }, "slow", function(){
                    console.log("Move the searchbar back by adding a negative -180px to the left.");
                });
            };
        });
    });
}

我也在使用“noconflict”。

那我在这里做错了什么？。

Thx

Answer 1

检查字段是否已设置动画。如果它是动画的，则返回否则应用动画。在点击功能中尝试下面的代码示例。

input = icon.parent().find("#search");
if(input.is(":animated")){
  // return if Animate applied.
   return;
}
else
{
   // Animate the input field
   input.animate({
     "width": "165px",
     "opacity": 1
   }, 300, function() {
      input.focus();
   });
}