jQuery slideDown / slideUp не работает в IE7 - PullRequest
Новая
       10

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

5 голосов
/ 02 декабря 2009

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

Ответы [ 2 ]

22 голосов
/ 15 января 2011

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

zoom: 1;

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

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

1 голос
/ 02 декабря 2009

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

Понял! Мне пришлось использовать mouseenter, а не focus, но вот законченный скрипт с условным событием mouseenter для дьявола, a.k.a. 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");
});

});
...