मैं इस पर अपना सिर खुजला रहा हूंहालांकि, लेकिन मैं सोच रहा था कि अगर किसी को यह अंदाजा हो कि मैं jQuery के शो फंक्शन का उपयोग करके किसी विशेष प्रभाव को कैसे बना सकता हूं। मैं क्या करना चाहूंगा अपने हेडर / नेविगेशन बार को पेज पर ऊपर से नीचे की ओर स्लाइड कर रहा हूं, जिसमें सभी तत्व एनीमेशन के साथ चल रहे हेडर टैग के भीतर हैं।
अब तक, मैंने "$" ("हेडर") की कोशिश की है।
मैंने $ ("हैडर") भी आज़माया।शो ("ड्रॉप", {दिशा: "अप"}, 1000), लेकिन इससे ड्राप डाउन होने से पहले एक तरह का फीका प्रभाव पड़ता है। मैं चाहूंगा कि यह ऊपर से नीचे स्लाइड करे। एकमात्र ऐसा ही उदाहरण जो मुझे मिल गया है, वह हेडर के समान है http://www.sproutcore.com, लेकिन मेरा मानना है कि वे इस आशय के लिए CSS3 का उपयोग कर रहे हैं।
क्या jQuery के शो () के साथ इसे पूरा करने का एक सरल तरीका है?
पढ़ने के लिए धन्यवाद!
उत्तर:
उत्तर № 1 के लिए 1आपके HTML / CSS को देखे बिना यह बताना मुश्किल है कि क्या वहां कोई समस्या है, लेकिन;
क्या आपने अपने हेडर को प्रदर्शित करने की कोशिश की है: फिर कोई नहीं।
$("#header").slideDown(1000);
मैं "tslideUp" की कल्पना कर सकता हूं।
इसके अलावा आप अपने हेडर की ऊँचाई को 0 पर सेट करने और पेज लोड करने की कोशिश कर सकते हैं:
$("#header").animate({
height : 100px
},{
queue : false,
duration : 1000
});
लेकिन यह हेडर आंतरिक सामग्री के साथ कुछ कायरता मुद्दों को दिखा सकता है।
यदि आप .show () + UI का उपयोग कर रहे हैं, तो स्लाइड को काम करना चाहिए।
$("#header").show({
effect : "slide",
easing : "easeOutQuart",
direction : "down",
duration : 1000
});
जवाब के लिए 0 № 2
मेरे द्वारा बनाया गया यह उदाहरण देखें: http://jsfiddle.net/hFBc8/1/
एचटीएमएल
<div class="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="sub-menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
जावास्क्रिप्ट
var h = $(".sub-menu").height();
$(".sub-menu").css("top", -h);
$(".menu").hover(
function(){
$(".sub-menu").animate({top: 0});
},
function(){
$(".sub-menu").animate({top: -h});
}
);
सीएसएस
.menu li {
float: left;
padding: 10px 20px;
}
.menu {
background: #ffff33;
overflow: auto;
z-index: 10;
position:relative;
}
.sub-menu {
position: relative;
top: 0;
}
जवाब के लिए 0 № 3
देखें कि क्या यह आप चाहते हैं: http://jsfiddle.net/bryanjamesross/hHmpH/
समस्या यह है कि slideDown तथा slideUp ऊंचाई को चेतन करो, स्थिति को नहीं। तो क्या होता है कि कंटेनर की ऊंचाई छोटी / बड़ी होती है, जबकि सामग्री नहीं होती है।
slideDown तथा slideUp वास्तव में बुलाया जाना चाहिए expandVertical तथा contractVertical (या संभवतः squeeze)।