5

だから私は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:fixed 要素の子孫で使用すると IE7 で失敗します。このアニメーションは position:fixed 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;
}
4

2 に答える 2

23

jQuery のslideUp()、slideDown()およびIE7の要素でslideToggle()は機能しません。一部のスライドの問題は、追加することで解決できますposition:relative

zoom: 1;

スライドするコンテナおよび/または要素へ。

スライドの問題のいくつかを解決するために、レイアウトに <table>を使用するように戻す必要がありました。

于 2011-01-15T10:35:16.320 に答える
1

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

とった！focus ではなく mouseenter を使用する必要がありましたが、IE とも呼ばれる悪魔の条件付き mouseenter イベントを含む完成したスクリプトを次に示します。

//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-02T04:35:02.710 に答える