Ошибка родительского тега div, когда дети анимируются с помощью jQuery в Internet Explorer 9 - PullRequest
Новая
       15

Ошибка родительского тега div, когда дети анимируются с помощью jQuery в Internet Explorer 9

8 голосов
/ 18 ноября 2011

Когда к родительскому div применяется примененная тень css и его дочерние элементы анимируются с помощью jQuery, так что родительский div меняет высоту, при просмотре страницы в IE9 появляются странные линии под родительским div.Вот пример: http://jsfiddle.net/vPqxb/11/ и скриншот:

enter image description here

Для того, кто просто хочет увидеть код;вот HTML: 

<div class="parent">
    <div class="longer">&nbsp;</div>
</div>

, CSS: 

div.parent {
    background: #ddd;
    box-shadow: 1px 1px 2px 1px #c9c7c9;
    width: 80%;
}

div div {
    background: red;
    height: 10px;
    width: 30px;
}

.longer {
    height: 200px;
}

и JavaScript (обратите внимание, что для первого требуется пользовательский интерфейс jQuery): 

$("a.toggleclass").on("click", function() { //some trigger, doesn't matter where
    div.stop(true,true).toggleClass("longer", 1000);
});

$("a.animate").on("click", function() { //another one without jQuery UI
    div.stop(true,true).animate({"height":"20px"}, function() {
        div.attr({"style":""});
    });
});

Мои вопросы будут:

  1. Это ошибка jQuery или Internet Explorer?
  2. Можете ли вы найти способ обойти это?(Internet Explorer 9 не поддерживает переходы, поэтому я ничего не понимаю)

Большое спасибо за любую помощь.

Ответы [ 2 ]

4 голосов
/ 30 декабря 2011

Этот вопрос аналогичен, и я считаю, что предложенный мной ответ является уместным.

Вкратце: http://jsfiddle.net/DwApF/12/

Полное объяснение: https://stackoverflow.com/a/8676063/453277

0 голосов
/ 23 ноября 2011

Ваш код немного сложен.Я не могу точно сказать, каково было ваше желаемое поведение, но это выглядит более плавно, и я чувствую, что IE9 справится с этим лучше, но я не смог протестировать. 

$("a.toggleclass").click(function() {
    $('.parent').animate({height: 1000}, '1000');
});

Я обновил ваше JS Fiddle .Я чувствую, что это связано с .stop(true,true).

...