Плагин цветной анимации jQuery не работает в IE или Firefox - PullRequest
Новая
       27

Плагин цветной анимации jQuery не работает в IE или Firefox

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

Я осмотрелся здесь, но не могу выяснить, почему это не работает должным образом. Я хочу сделать простое затухание на цветном фоне при наведении. Он работает только в Chrome, но не в Firefox или IE. Любая помощь будет принята с благодарностью!

HTML: 

<div id="sidemenu">
        <a href="#">Spiritual Ceremonies</a>
            <a href="#">Flower Ceremony</a>
            <a href="#">Ceremony Four Elements</a>
            <a href="#">Butterfly Ceremony</a>
            <a href="#">Non Denomination Ceremony</a>
            <a href="#">Mayan Wedding Ceremony</a>
            <a href="#" id="no">Civil Mexican Ceremony</a>
</div>

Jquery: 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.animate-colors.js"></script>
<script>
$("#sidemenu>a").hover(function() {
        $(this).animate({backgroundColor: "#943939",color: "#fff"}, 150 )}
        ,function() {
        $(this).animate({backgroundColor: "#dcacbb",color: "#8e5769"}, 150 );
        });             
</script>

Ответы [ 2 ]

2 голосов
/ 26 февраля 2012

Правильный ответ, уже отправленный другим пользователем, исчез, поэтому я выкладываю его снова вместе с дополнительными пояснениями и рабочей демонстрацией.

Окружите ваш код функцией $(document).ready(), поскольку, по-видимому, нетсоответствующих элементов DOM существуют при вызове вашего кода.$(document).ready() срабатывает только после полной загрузки DOM, что позволяет правильно манипулировать или целевыми элементами. 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.animate-colors.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#sidemenu>a").hover(
        function() {
            $(this).animate({backgroundColor: "#943939",color: "#fff"}, 150 )
        },function() {
            $(this).animate({backgroundColor: "#dcacbb",color: "#8e5769"}, 150 );
    });  

});

</script>

jsFiddle DEMO

Демо предполагает, что выиспользуете этот плагин .

1 голос
/ 07 июля 2013

Убедитесь, что элемент имеет предопределенный цвет фона в CSS. 

.yourelement { 
    background-color: #FFF; 
}

теперь он должен работать в Firefox и IE ....

...