2013-07-08 14 views
5

हाय दोस्तों मेरे पास एक टेक्स्टरेरा है और मैं इस तत्व के साथ animate() और css() फ़ंक्शंस का उपयोग करना चाहता हूं।केवल एक बार फोकस करें - Jquery

css() फ़ंक्शन ठीक से काम कर रहा है लेकिन समस्या focus() func है। पेज लोड के बाद सब कुछ ठीक है,

जब मैं टेक्स्टरी पर ध्यान केंद्रित करता हूं तो इसकी ऊंचाई 50px बढ़ रही है, लेकिन जब मैं धुंधला करता हूं और फिर टेक्स्टरेरा पर फिर से ध्यान केंद्रित करता हूं तो ऊंचाई 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> 

उत्तर

8

सिर्फ एक बार एक ईवेंट सक्रिय करने के लिए आपको one() समारोह है, जो एक घटना श्रोता देता तो पहली बार यह निकाल दिया है के बाद उसे निकाल देता है का उपयोग कर सकते हैं:

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

}); 

Working Demo

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 युक्त फिर से चलाने कभी नहीं होगा। यदि आप चाहते हैं कि आप तत्व को छोड़कर फोकस करना चाहते हैं तो आप वहां से जा सकते हैं।

संबंधित मुद्दे