jQuery slideDown/slideUp nie działa w IE7

Question

Tak więc używam bardzo podstawowego jQuery .slideDown, który działa świetnie w FF, Safari i Chrome. W IE7 nie będzie działać. oto skrypt:

---

//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"); 
}); 
}); 

---

Byłem badania godzinami i znaleźć coś na temat błędu odnoszącego się do slideUp/dół, który powoduje jego uszkodzenie w IE7, gdy jest używany na potomkach świetnym miejscu : naprawione elementy. Ta animacja dzieje się w pozycji: fixed navbar, jednak próbowałem owijać wewnętrzne elementy pozycją: względną, ale bez skutku, wciąż nie dostaję nic w IE. Zauważ też, że element nav jest ukryty za pomocą jQuery, funkcja działa nawet w IE7, jednak slideup/down nie są.

Oto związane CSS:

/* --------------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

Przyczyną tego zachowania w moim przykładzie jest to, że IE nie rozpoznaje .focus którego używałem do wyzwalania .slideUp/dół. Znalazłem dobrą odpowiedź wyjaśniającą problem: here, ale to pozwala na dodanie klasy CSS na fokusie, ale muszę animować osobny element przy pomocy slideUp/Down na .focus, więc klasa CSS nie pomaga mojej sytuacji, ktoś ma pomysły?

---

Gotowy! Musiałem użyć mouseenter zamiast koncentrować, ale tutaj jest zakończona skrypt z warunkowym zdarzenia mouseenter dla diabła, aka 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() i slideToggle() nie działają z position:relative elementów IE7. Niektóre kwestie ślizgowe mogą być rozwiązane przez dodanie

zoom: 1; 

do pojemnika przesuwnych i/lub elementów.

Musieliśmy wrócić do korzystania <tabeli> dla układu rozwiązać niektóre kwestie przesuwnych.