jQuery slideDown / slideUp not working in IE7
Solution 1
The reason for this behavior in my example is that IE doesn't recognize .focus which I was using to trigger the .slideUp/Down. I've found a good answer explaining the problem here, however this allows you to add a CSS class on focus, but I need to animate a separate element with slideUp/Down on .focus so the CSS class doesn't help my situation, anyone have ideas?
Got it! I had to use mouseenter rather than focus, but here is the completed script with a conditional mouseenter event for the devil, a.k.a. 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");
});
});
Solution 2
jQuery's slideUp()
, slideDown()
and slideToggle()
don't work with position:relative
elements in IE7.
Some slide issues can be resolved by adding
zoom: 1;
To the sliding container and/or elements.
We had to revert to use <table> for layout to solve some of the sliding issues.
Brian
Updated on June 04, 2022Comments
-
Brian almost 2 years
So I'm using a very basic jQuery .slideDown which is working great in FF, Safari, and Chrome. Won't work at all in IE7. here is the script:
//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"); }); });
I've been researching for hours and found something about a bug relating to slideup/down that causes it to fail in IE7 when being used on descendants of postion:fixed elements. This animation is happening within a position:fixed navbar, however, I've tried wrapping the inner elements with position:relative but to no avail, I still get nothing in IE. Also, notice that the nav element is being hidden with jQuery, that function is working even in IE7, however, the slideup/down are not.
Here is the related 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; }