jQuery स्लाइडडाउन/स्लाइडअप आईई 7

Question

में काम नहीं कर रहा है इसलिए मैं एक बहुत ही बुनियादी jQuery का उपयोग कर रहा हूं। स्लाइडडाउन जो एफएफ, सफारी और क्रोम में बहुत अच्छा काम कर रहा है। आईई 7 में बिल्कुल काम नहीं करेगा।

---

//Top Mailing List Drop down animation 
$(document).ready(function() { 
$('div#top_mailing_hidden').hide(); 

// Expand Panel 
$("input#top_mailing").focus(function(){ 
$("div#top_mailing_hidden").slideDown("slow"); 
}); 

// Collapse Panel 
$("input#top_mailing").blur(function(){ 
$("div#top_mailing_hidden").slideUp("slow"); 
}); 
}); 

---

मैं घंटों के लिए शोध किया गया है और नीचे slideup करने के लिए/यह कारण बनता है कि IE7 में विफल जब स्थिति के वंशज पर इस्तेमाल किया जा रहा से संबंधित एक बग के बारे में कुछ पाया: यहाँ स्क्रिप्ट है : निश्चित तत्व। यह एनीमेशन एक स्थिति के भीतर हो रहा है: निश्चित नेविबार, हालांकि, मैंने आंतरिक तत्वों को स्थिति के साथ लपेटने की कोशिश की है: सापेक्ष लेकिन कोई फायदा नहीं हुआ, मुझे अभी भी आईई में कुछ भी नहीं मिला है। साथ ही, ध्यान दें कि एनवी तत्व jQuery के साथ छिपा हुआ है, यह फ़ंक्शन आईई 7 में भी काम कर रहा है, हालांकि, स्लाइडअप/डाउन नहीं हैं।

/* --------------Top Dropdown Mailing List------------------- */ 

#top_nav div#top_mailing{ 
    float: right; 
    width: 351px; 
    padding: 0 10px 10px 5px; 
    background: url(images/top_mailing_bg.png) bottom center no-repeat; 
    position: absolute; 
    top: 0; 
    right: 0; 
    color: #fff; 
    text-shadow:0 -1px 0px #222; 
} 
#top_mailing #top_mailing_hidden{ 
    font-size: .7em; 
    text-align: center; 
    position: relative; 
    height: 30px; 
    zoom: 1; 
} 
#top_mailing #top_mailing_hidden div{ 
} 
#top_mailing #top_mailing_hidden a{ 
    color: #acffc0; 
    font-weight: bold; 
} 
#top_mailing #top_mailing_visible{ 
    height: 30px; 
    font-weight: bold; 
    font-size: .9em; 
    padding-top: 5px; 
} 

Answer 1

मेरे उदाहरण में इस व्यवहार का कारण है कि IE .focus जो मैं नीचे .slideUp/गति प्रदान करने के उपयोग कर रहा था को नहीं पहचानता है:

यहाँ संबंधित सीएसएस है। मुझे here समस्या को समझाते हुए एक अच्छा जवाब मिला है, हालांकि यह आपको फोकस पर एक सीएसएस क्लास जोड़ने की अनुमति देता है, लेकिन मुझे स्लाइडअप/डाउन ऑन फोकस के साथ एक अलग तत्व को एनिमेट करने की आवश्यकता है ताकि सीएसएस क्लास मेरी स्थिति में मदद न करे, किसी के पास विचार हैं?

---

समझ गया! मैं नहीं बल्कि फोकस से mouseenter का इस्तेमाल किया था, लेकिन यहाँ शैतान के लिए एक सशर्त mouseenter घटना, उर्फ ​​IE के साथ स्क्रिप्ट पूरी हो रहा है:

//Top Mailing List Drop down animation 
$(document).ready(function() { 

    if (jQuery.browser.msie === true) { 
     jQuery('#top_mailing') 
       .bind("mouseenter",function(){ 
        $("#top_mailing_hidden").slideDown('slow'); 
       }).bind("mouseleave",function(){ 
        $("#top_mailing_hidden").slideUp('slow'); 
       }); 
    } 

$('#top_mailing_hidden').hide(); 

// Expand Panel 
$("input#top_mailing").focus(function(){ 
$("#top_mailing_hidden").slideDown("slow"); 
}); 

// Collapse Panel 
$("input#top_mailing").blur(function(){ 
$("#top_mailing_hidden").slideUp("slow"); 
}); 

}); 

Answer 2

jQuery के slideUp(), slideDown() और slideToggle() में position:relative तत्वों के साथ काम नहीं करते आईई 7। कुछ स्लाइड मुद्दों रपट कंटेनर और/या तत्वों के लिए

zoom: 1; 

जोड़कर हल किया जा सकता।

हम रपट मुद्दों में से कुछ को हल करने के लेआउट के लिए < तालिका > उपयोग करने के लिए वापस लौटने के लिए किया था।