jQuery slideDown/slideUpがIE7で動作しない

Question

FF、Safari、Chromeでうまく動作している非常に基本的なjQuery .slideDownを使用しています。 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"); 
}); 
}); 

---

私は時間のために研究とpostionの子孫で使用されているとき、それはIE7で失敗する/ダウンをslideupに関連するバグについて何かを発見してきました：固定要素。このアニメーションはポジション内で起こっています：固定されたnavbar、しかし、私は内側の要素をposition：relativeでラップしようとしましたが、役に立たなかったので、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; 
} 

Answer 1

は私の例では、この挙動の理由IEは私が.slideUp /ダウンをトリガするために使用された.focusを認識しないということです。私は問題hereを説明した良い答えを見つけましたが、これはフォーカスにCSSクラスを追加することができますが、CSSクラスが私の状況に役立たないように.focusのslideUp/Downで別の要素をアニメーション化する必要があります。誰もがアイデアを持っている

---

これを取得しました！私はむしろ焦点よりも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"); 
}); 

}); 

Answer 2

はjQueryのslideUp()、slideDown()とslideToggle()は中position:relative要素では動作しません。 IE7。 一部スライドの問題が摺動容器及び/又は要素に

zoom: 1; 

を追加することで解決することができます。

には、スライドの問題のいくつかを解決するために、<テーブル>を使用する必要がありました。