jQuery slideDown/slideUp не работает в IE7

Поэтому я использую очень простой 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. Эта анимация происходит в навигационной панели position:fixed, однако я пытался обернуть внутренние элементы с position:relative, но безрезультатно, я все еще ничего не получаю в 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;
}

javascript jquery css internet-explorer-7 slideup
person Brian    schedule 02.12.2009    source источник
comment
Выдает какую-нибудь ошибку? Например. в Firebug   -  person o.k.w    schedule 02.12.2009
comment
Нет, и я просто вырезал всю свою таблицу стилей, и она все еще работает в FF, а не в IE, так что это даже не связано с CSS, я думал, что это проблема позиционирования CSS, которая не нравится IE.   -  person Brian    schedule 02.12.2009

Ответы (2)


arrow_upward
23
arrow_downward

slideUp(), slideDown() и slideToggle() jQuery не работают с элементами position:relative в IE7. Некоторые проблемы со слайдами можно решить, добавив

zoom: 1;

К выдвижному контейнеру и/или элементам.

Нам пришлось вернуться к использованию ‹table› для макета, чтобы решить некоторые проблемы со скольжением.

person Bob Fanger    schedule 15.01.2011
comment
Ха, спасибо, что спасли меня от стука головой о стол, так как я только что столкнулся с этой проблемой с .animate(). Определенно +1 от меня. - person BobG; 01.12.2011
comment
Мне нравится stackoverflow, когда я могу найти ответ за 20 секунд и перейти к остальной части своей работы. - person Christopher Altman; 24.01.2012
comment
хороший @Bob-Fanger - это решило проблему, с которой я столкнулся :) проголосовал за - ура - person Terry_Brown; 03.05.2012

arrow_upward
1
arrow_downward

Причина такого поведения в моем примере заключается в том, что IE не распознает .focus, который я использовал для запуска .slideUp/Down. Я нашел хороший ответ, объясняющий проблему здесь, однако это позволяет вам добавить класс CSS в фокус, но мне нужно анимировать отдельный элемент с помощью slideUp/Down на .focus, чтобы класс CSS не помог в моей ситуации, у кого-нибудь есть идеи?

Понятно! Мне пришлось использовать 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");
});

});
person Brian    schedule 02.12.2009