मेरे पास निम्न HTML है:
<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>
और (काम करना) उन दोनों के बीच टॉगल करता है:
$(".back-welcome").click(function(){
$("#welcome-content").toggle();
$("#configure-content").toggle();
});
जैसा कि मैं उनके बीच टॉगल करता हूं, मैं फीका प्रभाव बनाने के लिए CSS3 का उपयोग करना चाहता हूं। मैंने निम्नलिखित कोशिश की है:
#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}
हालाँकि, कोई एनीमेशन नहीं होता है। मैं क्या गलत कर रहा हूं?
उत्तर:
उत्तर № 1 के लिए 4संपत्ति display वह तरीका बताएं toggle () "सीएसएस बदलाव के साथ एनिमेटेड नहीं हो सकता है। शायद आप देखना चाहते हैं fadeIn() तथा fadeOut().
संपादित करें
मुझे यह एक और तरीका लगा fadeToggle () मैं इसके बारे में ज्यादा नहीं जानता, लेकिन आप इसे खोज और उपयोग कर सकते हैं:
$(".back-fade").click(function(){
$("#welcome-content").fadeToggle(2000);
$("#configure-content").fadeToggle(2000);
});
इस डेमो की जांच करें http://jsfiddle.net/8urRp/14/ *
*मैंने उन्हें एक ही स्थान पर रखने के लिए पूर्ण स्थान दिया
उत्तर № 2 के लिए 1
केवल एक सीएसएस संपत्ति के लिए एक मूल्य से दूसरे में संक्रमण हो सकता है। एक फीका संक्रमण के लिए, opacity 0 से एक तक जाना चाहिए।
सीएसएस
.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}
जावास्क्रिप्ट
$(".mybtn").click(function() { $(".foo").toggleClass("active"); })
अब सीएसएस बदलावों के साथ एक छुपा तत्वों को दिखाने के साथ एक कष्टप्रद बात है। से संक्रमण display: none सेवा मेरे display: block तत्काल है, अन्य सभी संक्रमणों को रद्द कर रहा है।
इसके आसपास कई तरीके हैं। सबसे पहले आप सिर्फ jQuery का उपयोग कर सकते हैं fadeOut समारोह। यदि आप वास्तव में सीएसएस संक्रमण का उपयोग करने पर जोर देते हैं तो एक नज़र डालें यह जवाब.