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中工作

回答

相關問題