2009-12-02 20 views
5

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:jQuery slideDown/slideUp nie działa w IE7


//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; 
} 
+0

Czy powoduje błąd? Na przykład. w Firebug –

+0

Nie, a ja po prostu wyciąłem cały arkusz stylów i nadal działa w FF, a nie w IE, więc nie jest to nawet związane z CSS, myślałem, że to był problem z pozycjonowaniem CSS, którego IE nie lubił. – Brian

Odpowiedz

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

}); 
22

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.

+0

Hah, dzięki za uratowanie mnie przed uderzeniem głową w biurko, ponieważ właśnie napotkałem ten problem z .animate(). Zdecydowanie +1 ode mnie. – BobG

+2

Uwielbiam stackoverflow, gdy mogę znaleźć odpowiedź w ciągu 20 sekund i przejść do reszty mojej pracy. –

+0

nice one @ Bob-Fanger - poprawiono problem, który miałem :) Upvoted - okrzyki –