jQuery slideDown/slideUp不能在IE7中工作

因此，我使用了一个非常基本的jQuery .slideDown，它在FF，Safari和Chrome中工作良好。在IE7中完全不起作用。这里是脚本：jQuery slideDown/slideUp不能在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"); 
}); 
});

我已经研究了好几个小时，发现一些有关与效果基本show /下，导致它当现在的位置的后裔正在使用IE7中失败的错误：固定元素。这个动画发生在一个位置：固定的导航栏，但是，我试图用位置包装内部元素：相对但无济于事，IE仍然没有得到任何东西。另外，请注意nav元素被jQuery隐藏起来，即使在IE7中，该函数也可以工作，但是，滑动/放下不是。

下面是相关的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; 
}

来源

2009-12-02 Brian

它会抛出任何错误吗？例如。在Firebug – 2009-12-02 02:38:50

没有，我只是削减了我的整个样式表，它仍然在FF中工作，而不是在IE中，所以它甚至没有CSS相关，我认为这是一个CSS定位问题，IE不喜欢。 – Brian 2009-12-02 03:28:54

这样做的原因行为在我的例子是，IE不能识别.focus我用触发.slideUp /向下。我找到了一个很好的答案，解释了here这个问题，但是这可以让你在焦点上添加一个CSS类，但是我需要在.focus上用slideUp/Down对一个单独的元素进行动画处理，这样CSS类不会帮助我的情况，任何人有想法？

Got it！我不得不使用的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"); 
}); 

});

来源

2009-12-02 04:35:02 Brian

jQuery的slideUp()，slideDown()和slideToggle()不与position:relative元素工作IE7。一些滑动的问题可以通过添加

zoom: 1;

在滑动容器和/或元件来解决。

我们不得不恢复使用<表>为布局解决一些滑动问题。

来源

2011-01-15 10:35:16

哈，谢谢你救了我在我的桌子上敲我的头，因为我刚刚遇到了.animate（）的这个问题。绝对+1我。 – BobG 2011-12-01 17:37:40

当我在20秒内找到答案并继续工作时，我爱上了stackoverflow。 – 2012-01-24 15:59:00

不错的一个@ Bob-Fanger - 这个修正了我遇到的问题:) upvoted - 干杯 – 2012-05-03 12:36:08

jQuery slideDown/slideUp不能在IE7中工作

回答

相关问题