Question

朋友们，我有一个textarea，我想对这个元素使用animate()和css()函数。

css()函数工作正常，但问题是focus() func。页面加载后一切都很好，

当我专注于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>

Answer 1

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

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

});

<强> Working Demo

Answer 2

您可以使用jQuery's .one() function轻松完成此操作。这只会为它所附加的元素最多触发一次事件处理程序。

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

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

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

只关注一次 - Jquery

2 个答案: