несколько функций .animate () не работают в IE9 (работает в ie6;) - PullRequest
Новая
       15

несколько функций .animate () не работают в IE9 (работает в ie6;)

1 голос
/ 11 ноября 2011

У меня странная, но простая проблема с функцией .animate () в IE9.Я говорю странно, потому что он работает, как и ожидалось, даже в IE6.

У меня есть два неупорядоченных списка.Когда кто-то наводит курсор мыши на li в первом списке, соответствующий li оживляется во втором списке.Это работает должным образом со всеми хорошими браузерами, а также IE6.Но в IE9 анимируется только первый li, два других не анимируются.

Вот разметка: 

    <ul id="nav">
        <li id="nav_one"><h1>NAV ONE<h1><p>This animates in IE9</p></li>
        <li id="nav_two"><h1>NAV TWO<h1><p>This does not animate in IE9</p></li>
        <li id="nav_three"><h1>NAV THREE<h1><p>This does not animate in IE9</p></li>
    </ul>
    <ul id="nav_wrapper">
        <li id="nav_wrapper_one"><h1>&nbsp;<h1><p>&nbsp;</p></li>
        <li id="nav_wrapper_two"><h1>&nbsp;<h1><p>&nbsp;</p></li>
        <li id="nav_wrapper_three"><h1>&nbsp;<h1><p>&nbsp;</p></li>
    </ul>

Вот CSS: 

#nav{
    color: #fff;
    font-family: 'Open Sans Condensed', Arial, sans-serif;
    margin: 2% 2%;
    position:absolute;
    top:0px;
    z-index: 3;
}
#nav h1{
    font-size:42px;
}
#nav p{
    font-size:16px;
}
#nav_wrapper{
    color: #fff;
    font-family: 'Open Sans Condensed', Arial, sans-serif;
    margin: 2% 2%;
    position:absolute;
    top:0px;
    width:100%;
    z-index: 2;
}
#nav_wrapper h1{
    font-size:42px;
}
#nav_wrapper p{
    font-size:16px;
}
#nav_wrapper li{
    background: rgb(200, 200, 200);
    background: rgba(200, 200, 200, 0.6);
    overflow:hidden;
    width:0%;
}

Условный CSS для IE: 

#nav_wrapper li{
    background:none;
    /* For IE 5.5 - 9*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60c8c8c8, endColorstr=#60c8c8c8);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#60c8c8c8, endColorstr=#60c8c8c8)";
    zoom: 1;
}

И, наконец, jQuery: 

$("#nav_one").hover(
function(){ $("#nav_wrapper_one").stop().animate({width: '96%'}, 300); },
function(){ $("#nav_wrapper_one").stop().animate({width: '0%'}, 300); }
);
$("#nav_two").hover(
function(){ $("#nav_wrapper_two").stop().animate({width: '96%'}, 300); },
function(){ $("#nav_wrapper_two").stop().animate({width: '0%'}, 300); }
);
$("#nav_three").hover(
function(){ $("#nav_wrapper_three").stop().animate({width: '96%'}, 300); },
function(){ $("#nav_wrapper_three").stop().animate({width: '0%'}, 300); }
);

ПОЖАЛУЙСТА, ПОЖАЛУЙСТА, ПОЖАЛУЙСТА, ПОМОГИТЕ !!Я в конце своей привязи пытаюсь это исправить.Но, эй, я просто новичок с jQuery, поэтому я не пойму этого, даже если сейчас смотрю на проблему.Я знаю, что я пытаюсь достичь, можно сделать с помощью плагинов.Но если бы я мог использовать это, я бы сделал это давным-давно.Любая помощь будет оценена.Заранее спасибо.

1 Ответ

2 голосов
/ 11 ноября 2011

Исправьте закрывающие теги </h1>.Вы имеете их как <h1>.Закрывающие теги должны быть </h1>. 

<ul id="nav">
    <li id="nav_one"><h1>NAV ONE</h1><p>This animates in IE9</p></li>
    <li id="nav_two"><h1>NAV TWO</h1><p>This does not animate in IE9</p></li>
    <li id="nav_three"><h1>NAV THREE</h1><p>This does not animate in IE9</p></li>
</ul>
<ul id="nav_wrapper">
    <li id="nav_wrapper_one"><h1>&nbsp;</h1><p>&nbsp;</p></li>
    <li id="nav_wrapper_two"><h1>&nbsp;</h1><p>&nbsp;</p></li>
    <li id="nav_wrapper_three"><h1>&nbsp;</h1><p>&nbsp;</p></li>
</ul>

Кроме того, вы можете заменить все три блока практически идентичного кода следующим: 

function makeWrapper(el) {
    return $("#" + el.id.replace(/_/, "_wrapper_"));
}

$("#nav li").hover(
    function(){makeWrapper(this).stop().animate({width: '96%'}, 300); },
    function(){makeWrapper(this).stop().animate({width: '0%'}, 300); }
);

Очень желательно избегать повторного кода всякий раз, когдавозможный.Вы можете увидеть его здесь: http://jsfiddle.net/jfriend00/v5dmn/.

...