JQuery раздвижные рывки в IE8 - PullRequest
Новая
       8

JQuery раздвижные рывки в IE8

0 голосов
/ 12 февраля 2012

Я использую приведенный ниже тестовый код для переключения div в зависимости от выбора переключателя. Проблема в том, что когда div скользит назад, возникает раздражающий рывок, который я замечаю только в IE8. Тот же код хорошо работает в Firefox.

Я попытался изменить DOCTYPE на тот, который я использую в тестовом коде ниже.

Может кто-нибудь предложить, как устранить дрожание / мерцание в IE, когда div скользит вверх?

Ниже приведен пример кода, с которым я тестирую.

Спасибо за любую помощь! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<style>
.div3{
width: 300px;
height:40px;
border: 1px solid blue;
}
.div4{
width: 300px;
height:80px;
border: 1px solid red;
}
</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $('[value="myDiv_3"]').attr('checked',true);
        $('.div3').show();

        $('input[name="myRadio"]').change(function(){
            var selected = $(this).val();
            $('.div3').slideUp(3000);
            $('#'+selected).slideDown(3000);
        });
    });
</script>
</head>


<body style="text-align:center;">
<form action="example.com" method="post">
    <input type="radio" name="myRadio" value="myDiv_3" />MyDiv3
    <input type="radio" name="myRadio" value="myDiv_4" />MyDiv4
</form>
<div id="myDiv_3" class="div3">Div number 3!</div>
<div id="myDiv_4" class="div4">Div number 4!</div>
</body>
</html>

1 Ответ

1 голос
/ 12 февраля 2012

Похоже, что есть сбой, потому что при выборе первой радиокнопки, называемой MyDiv3, следующий код говорит тому же div о необходимости скользить вверх и вниз одновременно. 

$('input[name="myRadio"]').change(function(){
     var selected = $(this).val();
     $('.div3').slideUp(3000);
     $('#'+selected).slideDown(3000);
});

Не совсем уверен, каким должен быть ваш конечный эффект, и, предполагая, что остальная часть кода соответствует вашим ожиданиям, вы можете попробовать это ... 

$('input[name="myRadio"]').change(function(){
     var selected = $(this).val();
     if (selected === 'myDiv_3') {
         $('#myDiv_3').slideDown(3000);
     } else {
         $('#myDiv_3').slideUp(3000);
     }
});

Демонстрация: http://jsfiddle.net/wMfFe/2/

РЕДАКТИРОВАТЬ после просмотра демонстрационной страницы OP :

В источнике страницы ... 

<!-- http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Демонстрационная страница OPвставив IE8 в quirks-mode, потому что doctype не самая первая строка в файле. doctype всегда должен стоять первым .Использование инструментов в F12 проверяет активный quirks-mode, а затем принудительное IE8 Standards Mode устраняет проблему с рывками анимации.

Удаление всего, что выше doctype, включая пустое пространство, предотвратит скольжение IE8 в quirks-modeтак как остальная часть страницы также правильно проверена .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...