jQuery slideDown / slideUp在IE7中不起作用答案

【问题标题】：jQuery slideDown / slideUp not working in IE7jQuery slideDown / slideUp在IE7中不起作用
【发布时间】：2014-09-16 03:11:53
【问题描述】：

所以我使用了一个非常基本的 jQuery .slideDown，它在 FF、Safari 和 Chrome 中运行良好。在 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");
});
});

我已经研究了几个小时，发现了一个与上滑/下滑相关的错误，该错误导致它在 IE7 中用于 postion:fixed 元素的后代时失败。此动画发生在位置：固定导航栏中，但是，我尝试使用位置：相对包装内部元素但无济于事，我在 IE 中仍然一无所获。另外，请注意，导航元素被 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;
}

【问题讨论】：

它会抛出任何错误吗？例如。在萤火虫中
不，我只是剪掉了我的整个样式表，它仍然在 FF 而不是在 IE 中工作，所以它甚至与 CSS 无关，我认为这是一个 IE 不喜欢的 CSS 定位问题。

标签： javascript jquery internet-explorer-7 css slideup

【解决方案1】：

jQuery 的 slideUp()、slideDown() 和 slideToggle() 不适用于 IE7 中的 position:relative 元素。一些幻灯片问题可以通过添加解决

zoom: 1;

到滑动容器和/或元素。

我们不得不恢复使用

进行布局来解决一些滑动问题。

【讨论】：

哈，感谢您在我刚刚遇到 .animate() 的这个问题时让我免于在桌子上敲打我的头。绝对是我 +1。

我喜欢 stackoverflow，因为我可以在 20 秒内找到答案并继续我的其余工作。

不错的@Bob-Fanger - 这解决了我遇到的问题:) 赞成 - 干杯

【解决方案2】：

在我的示例中出现这种行为的原因是 IE 无法识别我用来触发 .slideUp/Down 的 .focus。我找到了一个很好的答案来解释问题here，但是这允许您在焦点上添加一个 CSS 类，但我需要在 .focus 上使用 slideUp/Down 为单独的元素设置动画，因此 CSS 类对我没有帮助情况，有人有想法吗？

知道了！我不得不使用 mouseenter 而不是 focus，但这里是一个完整的脚本，其中包含一个用于魔鬼的条件 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");
});

});

【讨论】：