jQuery animate background-color не работает в IE

Я пытаюсь создать веб-сайт с навигацией, подобной этому http://presentation.creative-tim.com/. Я хочу, чтобы навигационная панель менялась от прозрачного до цвета, когда пользователь прокручивает страницу вниз.jQuery animate background-color не работает в IE

Я использую Bootstrap и jQuery. Я знаю, что jQuery не может анимировать фоновый цвет. Поэтому я использую плагин jQuery color. Это мой сценарий:

$(document).ready(function() { 
$(window).scroll(function(){ 
    if ($(window).scrollTop() > 75){ 
     $('.navbar').stop().animate({'background-color': 'rgba(0, 128, 128, 1)'},400); 
    } 
    else if ($(window).scrollTop() < 75){ 
     $('.navbar').stop().animate({'background-color': 'rgba(0, 128, 128, 0)'},400); 
    } 
}); 
});

И это мой HTML:

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>test</title> 
 
    <!-- Bootstrap --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 

 
</head> 
 

 
<body> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
    <!-- color animations--> 
 
    <script type="text/javascript" src="js/color2.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
 

 
    <nav class="navbar navbar-default navbar-fixed-top" style="background-color : rgba(0, 128, 128, 0); "> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="#" >Brand</a> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a class="white" href="#">Blog</a> 
 
     </li> 
 
     <li><a class="white" href="#">Over ons</a> 
 
     </li> 
 
     <li><a class="white" href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 

 

 
    </div> 
 
    </nav> 
 
</body> 
 

 
</html>

Я застрял с этим вопросом в течение нескольких дней в настоящее время. Я прочитал на этом сайте, что добавление $(document).ready может помочь, но оно все еще не работает. Он отлично работает в Chrome и Firefox. Но в IE navbar остается прозрачным. Я не могу найти ответ в Google. Кто-нибудь знает, как это исправить?

источник

2016-06-09 K Bretscher

Какую версию IE вы используете? – tektiv

Я тестирую IE 11 (победа 7) Я собираюсь попробовать к вечеру –

Я понял. Это была глупая ошибка! IE 11 ограничивал выполнение моего JavaScript.

источник

2016-06-11 10:55:31

Есть ли исправление для этого? – Acidic

jQuery animate background-color не работает в IE

ответ

Смежные вопросы