jQuery slideDown / slideUp not working in IE7

Question

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

Answer 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?

Answer 2

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

});

Answer 3

I guess it's a little bit too late now, but I'm having the same problem... When i trigger the slideDown some spans and divs just disappear... and afterwards when i execute other jQuery effect, like fadeOut on the same page, they mysteriously reappear. I'm guessing it's the float property that mess around with the jQuery slide, because it's the only thing we have in common in ours scripts.