jQuery, शेष पृष्ठ को परेशान किए बिना एक div छिपाने

Question

(स्यूडोकोड)

<header> 
    <search> 
     <form> 
      <input text> <input submit> 
     </form> 
    </search> 
    <menu> 
     <ul> 
      <li>File</li> 
      <li>Edit</li> 
      <li>Text</li> 
     </ul> 
    </menu> 
</header> 

<content></content> 

<footer></footer> 

नीचे के रूप में पेज पर विचार करें पृष्ठ लोड हो तो मैं शीर्ष लेख को दिखाने के लिए, 10 सेकंड का कहना है के लिए चाहते हैं, तो बाहर फीका अगले कुछ सेकंड में। मैं पूरा कर सकते हैं समस्या है

jQuery.fn.delay = function(time, func){ 
    return this.each(function(){ 
     setTimeout(func, time); 
    }); 
}; 

$("header").delay(5000, function() { $(this).fadeOut(2000) }); 

साथ कि, जब हैडर फ़ेड आउट, शेष पृष्ठ (सामग्री, पाद लेख) ऊपर जगह हैडर के कब्जे में लेने के लिए मुलाकात। मैं चाहता हूं कि शीर्षलेख "डिस्प्ले: ब्लॉक" जैसा हो, उसमें इसकी जगह कभी नहीं छोड़ी जाती है।

फिर, के बाद हैडर दूर फीका है, मैं इसे माउसओवर पर वापस लाने के लिए, और mouseout पर फिर से बाहर फीका करने के लिए करना चाहते हैं। मैंने निम्नलिखित

$("header").hover(function() { $(this).show("slow"); $(this).hide("slow") }); 

पर प्रयास किया लेकिन ऐसा लगता है कि यह काम नहीं करता है। एक, हेडर अंदर और बाहर उछालता है, और शेष पृष्ठ को आगे बढ़ने का भी कारण बनता है।

मैं कैसे प्रभाव को पूरा कर सकते हैं?

Answer 1

.fadeOut() खत्म, अगर आप ऐसा नहीं करना चाहते हैं, .fadeTo() बजाय का उपयोग करें (जो अंत में display सेट नहीं होगा), इस तरह:

$("header").delay(5000).fadeTo(2000, 0); 

(ध्यान दें कि यह का उपयोग करता है built-in .delay() function)

You can try out a full demo here, मंडराना कार्यक्षमता fading और साथ ही आंदोलन के कारण नहीं, तो इस तरह के साथ:

$("header").hover(function() { 
    $(this).fadeTo(600, 1); 
}, function() { 
    $(this).fadeTo(600, 0); 
}); 

Answer 2

visibility:hidden का उपयोग करें, यह तत्व को display:none जैसा ही छुपाएगा लेकिन लेआउट नहीं बदलेगा।

आप चेतन समारोह का उपयोग कर सकते हैं। जैसे

$('#header').animate({opacity: 0}, 2000); 

$("#header").hover(
    function() { 
     $(this).animate({opacity: 1}, 400); 
     // you can also use one of the below 
     // $(this).css("opacity","1"); 
     // $(this).fadeTo(400, 1); 
    }, 
    function() { 
     $(this).animate({opacity: 0}, 400); 
    } 
); 

तुम भी fadeTo के रूप में निक ने उल्लेख उपयोग कर सकते हैं। फीका आंतरिक रूप से दूसरे पैरामीटर के बराबर अस्पष्टता सेट करता है। एक display: none; साथ

Answer 3

display:block और एक निश्चित चौड़ाई/ऊंचाई के साथ शीर्ष लेख के चारों ओर एक कंटेनर को जोड़ें, और शैली यह। जब आप हेडर को फीका करते हैं, तो कंटेनर हेडर पर कब्जा कर लिया गया स्थान सुरक्षित रखेगा।

इस तरह से आप शीर्ष लेख को फिर से दिखाने के बाद इसे बाहर फीका रहा है के लिए, करने के लिए hover घटना बाध्य करने के लिए एक तत्व है। एक बार छुपाए जाने पर, हेडर अपने hover ईवेंट प्राप्त नहीं कर पाएगा, इसलिए कंटेनर को उन्हें अपनी जगह पर प्राप्त करना होगा।

Answer 4

स्थिति आपके हेडर बिल्कुल, कि जिस तरह से अपनी उपस्थिति (या उसके अभाव) अन्य पृष्ठ तत्वों

Answer 5

को प्रभावित नहीं करेगा तुम बस एक और और शैली है कि हेडर के रूप में एक ही ऊंचाई होने के लिए div अंदर हेडर डाल सकता है। फिर यदि jQuery ने हेडर को हटा दिया तो यह पृष्ठ को प्रभावित नहीं करेगा।

वैकल्पिक रूप से, के रूप में लोबो कहते हैं, आप इसे दृश्यता का उपयोग कर सकता है: छिपा हुआ है, लेकिन मुझे लगता है कि यह प्रदर्शन स्थापित करने के लिए नहीं jQuery मजबूर करने के लिए मुश्किल हो जाएगा: कोई नहीं वैसे भी।

Answer 6

छुपा कार्य में कॉलबैक जोड़ने का प्रयास करें जो इसे दृश्यता में छुपाता है।

$(this).hide("slow", function(){ 
    $(this).css("visibility", "hidden"); 
    $(this).css("display", "block"); 
}); 

यह अच्छा होगा अगर jQuery आप जब कुछ छुपा है कि क्या प्रदर्शन या दृश्यता का उपयोग करने के स्पष्ट करने देते हैं, लेकिन मैं यह करता है नहीं लगता।