"दृश्यता: छुपा" कैसे एनिमेट करें?

Question

यहां मेरी समस्या है ... क्या आप कृपया मेरी मदद कर सकते हैं?

$(".button").hover(function(){ 
    $('.class').css({opacity: 1.0, visibility: "hidden"}).animate({opacity: 0}, 1200); 
},function(){ 
    $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200); 
}); 

यह तब दिखाई देता है जब यह दिखाई दे रहा है। :-(

Answer 1

इस तरह का प्रयास करें:

$(".button").hover(function(){ 
    $('.class').css("opacity", "1.0").animate({opacity: 0}, 1200, function(){ 
    $('.class').css("visibility", "hidden"); 
}); 
},function(){ 
    $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200); 
}); 

हालांकि, इस fadeIn और fadeOut के लिए सबसे अच्छा विकल्प नहीं है आप उन नामों के साथ बजाय तरीकों कि jQuery प्रदान करते हैं या बेहतर, उपयोग सीएसएस संक्रमण का उपयोग कर सकते हैं। मामले में आप कर सकते हैं।

Answer 2

$(".button").hover(function(){ 
    $('.class').css({opacity: 1.0, visibility: "visible"}).animate(//start off from opacity 1 and visibile 
     {opacity: 0}, //then animate opacity to 0 
     1200, 
     function(){ //this will be run after the animation is completed 
      $(this).css({ 
       visiblity:"hidden" //so it will be hidden only after the animation has completed 
      }); 
     } 
    ); 
},function(){ 
    $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200); 
}); 

Answer 3

उपयोग fadeIn/fadeOut

$(".button").hover(function(){ 
    $('.class').fadeOut(1200); 
},function(){ 
    $('.class').fadeIn(1200); 
}); 

आप duration में पास कर सकते हैं जो आपके लक्ष्यों को प्राप्त करना चाहिए

Answer 4

ऐसा इसलिए है क्योंकि इसे कैम एनिमेट करने से पहले हटा दिया जाता है। आपको पहले फीका को एनिमेट करना होगा, फिर एनीमेशन पूर्ण होने के बाद visibility: hidden लागू करें।

ऐसा करने के कुछ तरीके हैं: ब्राउजर एक घटना animationend बढ़ाता है (यह विभिन्न ब्राउज़रों के लिए prexied है - अधिक जानकारी के लिए यहां देखें) या आप jQuery एनिमेट की तुलना में बेहतर एनीमेशन लाइब्रेरी का उपयोग कर सकते हैं (जैसे ग्रीन सॉक TweenLite - http://greensock.com/tweenlite) अपनी एनीमेशन को संभालने के लिए, जो एनीमेशन के अंत में कोड चलाने के लिए तुच्छ बनाता है।

Answer 5

इसके लिए jQuery का उपयोग क्यों करें? यह, सीएसएस का उपयोग करें ताकि जैसे कहीं अधिक कुशल है:

.fade { 
 
    width:100px; 
 
    height:100px; 
 
    background-color:darkgray; 
 
    opacity: 1; 
 
    transition: opacity .25s ease-in-out; 
 
    -moz-transition: opacity .25s ease-in-out; 
 
    -webkit-transition: opacity .25s ease-in-out; 
 
} 
 

 
.fade:hover { 
 
    opacity: 0; 
 
}

<div class="fade"></div>

Answer 6

सीएसएस में दृश्यता संपत्ति बूलियन, चालू या बंद है।

काम करने के लिए किसी भी एनीमेशन के लिए, चाहे यह कीफ्रेम, संक्रमण या jquery के साथ किया गया हो, संपत्ति मूल्य सेट के प्रारंभ बिंदु और अंत बिंदु को चरणों के एक सेट में तोड़ने की आवश्यकता है, जिसके परिणामस्वरूप बड़ी संख्या में कदम होते हैं एक चिकनी एनीमेशन में।

इस तरह के एक साधारण प्रभाव के लिए, transition सर्वोत्तम है, please see the fiddle here। जावास्क्रिप्ट का उपयोग सिर्फ जोड़ने के लिए/वर्गों है कि संक्रमण

.hidden { 
    opacity: 0; 
    transition: opacity 0.5s ease-in; 
} 

.show-me { 
    opacity: 1; 
} 

आप संक्रमण संपत्ति संपत्ति को परिभाषित संक्रमण के लिए, तो लंबाई, आसानी समारोह का उपयोग करने के लिए (जो दर में परिवर्तन का वर्णन सेट को गति प्रदान को दूर जो एनीमेशन पर प्रभाव पड़ा है)। आपको अपनी एनिमेटेड प्रॉपर्टी के लिए स्टार्ट पॉइंट और एंड पॉइंट को परिभाषित करने की भी आवश्यकता है क्योंकि आप दो अस्पष्टता मानों के साथ देख सकते हैं।

रिकॉर्ड के लिए - यदि आपका प्रभाव अधिक जटिल था, तो एक कीफ्रेम उपयुक्त है, जैसे कि एक संपत्ति को पूरी तरह से एनिमेटेड आधे रास्ते के माध्यम से और फिर एनिमिलेशन के लिए, जबकि दूसरे को पूर्ण समय लेने के लिए, या फिर उत्तेजना के लिए; और JQuery एनिमेट एक एनीमेशन के निष्कर्ष पर कार्य करने का एक आसान तरीका प्रदान करता है जिसे कभी-कभी जरूरी भी होता है।