html - jQuery Animate top - animated element not staying in same position -

यहां मेरा html है:

  & lt; div id = "firstlevel" & gt; परीक्षण & lt; / div & gt; & Lt; div id = "टूलटिप" & gt; टूलटिप & lt; / div & gt;  

और निम्न jQuery:

  $ ("# firstlevel")। होवर (फ़ंक्शन () {$ ("# tooltip")। {अस्पष्टता: 1, शीर्ष: '- = 10px'}, 100);}, फ़ंक्शन () {$ ("# tooltip")। रोक ()। चेतन ({अस्पष्टता: 0, शीर्ष: '+ = 10px'} , 100);});  

बेला यहाँ है:

वर्तमान में, जब आप माता-पिता के पीछे जल्दी और आगे और आगे बढ़ते हैं, टूलटिप अंततः अपनी स्थिति में बदलाव करना शुरू कर देता है। / P>

जब मैं .stop () विधि को निकालता हूं, यह अच्छी तरह से कार्य करता है और उसी जगह पर रहता है, हालांकि हम इसे हर समय दोहराना नहीं चाहते हैं।

मुझे उसी स्थान पर रहने के लिए टूलटिप की आवश्यकता है और बहुत से होवर ओवरों के बाद कम या अधिक नहीं बढ़े।

धन्यवाद

कक्षा के साथ एक CSS3 एनीमेशन को प्राथमिकता दें। यह बेहतर काम करता है और हार्डवेयर त्वरित है। हॉवर पर टूलटिप के लिए एक क्लास जोड़ें, उसे हॉवर पर निकालें नौकरी संपन्न!

  #tooltip {-webkit -व्यवस्थापन: सभी 0.5 सेकंड्स-इन-आउट; -मोझ-संक्रमण: सभी 0.5 सेकंड्स-इन-आउट; -ओ-संक्रमण: सभी 0.5 सेकंड्स-इन-आउट; संक्रमण: सभी 0.5 में आसानी से आउट; पृष्ठभूमि: हल्का ग्रीन; पैडिंग: 20 पीएक्स; प्रदर्शन: इनलाइन-ब्लॉक; } # Tooltip.shift {transform: translateY (20px); }  

  & lt; script src = "https://ajax.googleapis.com/ajax/libs/ jQuery / 2.1.1 / jquery.min.js "& gt; & lt; / स्क्रिप्ट & gt; & Lt; div id = "प्रथमलेवल" & gt; हॉवर मी & lt; / div & gt; & Lt; div id = "tooltip" & gt; मैं टूलटिप & lt; / div & gt;