한 번만 초점을 - Jquery

Question

안녕하세요 친구 나는이 요소와 animate() 및 css() 기능을 사용하고 싶습니다.

css() 기능이 제대로 작동하지만 focus() func입니다. 페이지로드 후 모두 괜찮아요,

텍스트 영역에 집중할 때 높이가 50px로 증가하지만 흐리게 처리 한 다음 텍스트 영역에 다시 집중하면 다시 높이가 50px로 증가합니다.

blur() 기능을 사용하고 싶지 않습니다.

제 질문은 focus() 기능 사용에 대한 것입니다. 페이지로드 당 한 번에 focus()을 사용하고 싶습니다.

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

}); 

Working Demo

:

<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() 기능을 사용할 수 있습니다, 단 한 번 이벤트를 발생하려면

Answer 2

을 사용하면 쉽게 수행 할 수 있습니다. 이 이벤트 핸들러는 연결된 요소에 대해 한 번만 발생합니다. (스크립트가 당신의 #sharePost 요소 전에 를 제공하지 않는 한)

이 경우 $(document).ready(function()...을 사용할 필요가 없다. 당신이 단지 수에 대한 예를 들어 :

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

요소의 첫 번째 focus 후, 당신의 .animate 및 .CSS를 포함하는 핸들러는 다시 실행하지 않습니다. 포커스가 엘리먼트를 떠날 때 뒤로 물러 설 수 있다면 원한다면 거기에서 갈 수 있습니다.