5

嗨朋友们，我有一个 textarea，我想使用这个元素animate()并发挥作用。css()

css()功能正常工作，但问题是focus()功能。页面加载后一切正常，

当我聚焦到 textarea 时，它的高度增加了 50px，但是当我模糊然后再次聚焦到 textarea 时，高度又增加了 50px。

我不想使用blur()函数。

我的问题是关于使用focus()功能。我想focus() 每次页面加载使用一次。

<script>
              $(document).ready(function(){
                  $("#sharePost").focus(function(){
                  $(this).animate({height:"+=50px"});
                  $(this).css("background-color","#ffccdd");
                  });
                  $("#sharePost").blur(function(){
                  //$(this).animate({height:"-=50px"});
                  });
              });
</script>
4

2 回答 2

9

要仅触发一次事件，您可以使用one()函数，该函数附加一个事件侦听器，然后在第一次触发后将其删除：

$(document).ready(function(){
    $("#sharePost").one('focus', function(){
        $(this).animate({height:"+=50px"});
        $(this).css("background-color","#ffccdd");
    });

});

工作演示

于 2013-07-08T14:53:43.703 回答
2

您可以使用jQuery 的 .one() 函数轻松做到这一点。对于它所附加的元素，这最多只会触发一次事件处理程序。

在这种情况下，您不需要使用$(document).ready(function()...（除非您的脚本位于 #sharePost 元素之前）。作为一个例子，你可以这样做：

$("#sharePost").one("focus", function(){
    $(this).animate({height:"+=50px"});
    $(this).css("background-color","#ffccdd");
});

在元素上的第一个之后focus，包含您的 .animate 和 .css 的处理程序将永远不会再次运行。如果您想要在焦点离开元素时缩回，您可以从那里开始。

于 2013-07-08T15:15:09.937 回答