Почему анимация непрозрачности не работает в Chrome? - PullRequest
Новая
       9

Почему анимация непрозрачности не работает в Chrome?

4 голосов
/ 10 июля 2011

У меня есть очень простой код для выделения определенного элемента списка: 

var $highlights = $j("div.ab-highlights ul li a");
$highlights.hover(
    function () {
        $j(this).children().addClass('active'); 
        $j(this).parent().animate({opacity: 1}, 200);
        $highlights.not(this).parent().animate({opacity: 0.2}, 200);    
    }, 
    function () {
        $j(this).children().removeClass('active');
    }
);

БОЛЬШАЯ проблема в том, что он не работает в Chrome (в Firefox 4 и IE9 он отлично работает)

сайт http://www.alonbt.com

HTML-код 

<div class="ab-highlights">
    <ul>
        <li class="mansfred"><a href="http://alonbt.com/musical-biography/"><span>Musical Biography</span></a></li>
        <li class="museek"><a href="http://alonbt.com/music-visualization-project/"><span>Music Visulisation Project</span></a></li>
        <li class="ripui-sini"><a href="http://alonbt.com/chinese-acupuncture/"><span>Chinese Medicine Website</span></a></li>
        <li class="gay-guide"><a href="http://alonbt.com/the-gay-guide/"><span>The Gay Guide</span></a></li>
        <li class="philosophy"><a href="http://alonbt.com/perhaps-magazine/"><span>Magazine Design</span></a></li>
        <li class="taxi"><a href="http://alonbt.com/5-facts-about-the-israeli-taxi/"><span>5 Facts About Taxis</span></a></li>

    </ul>
</div>

В чем проблема?

И еще один маленький вопрос - есть ли способ получить логическое значение, переворачиваю ли я объект (что-то вроде - isHover()?)

1 Ответ

1 голос
/ 15 ноября 2012

Я считаю, что ваша анимация должна быть выполнена в CSS. Я не видел никаких проблем в Chrome, делающих это с помощью CSS, и производительность просто потрясающая. Мы просмотрели наш портал и диагностировали несколько проблем с производительностью JavaScript, которые были решены путем перемещения таких вещей, как эта и небольшая анимация, в CSS. 

<ul class="myClass">
    <li>One Item</li>
    <li>Two Item</li>
    <li>Three Item</li>
    <li>Four Item</li>
</ul>
​
.myClass li
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    opacity:.2;
    -webkit-transition:opacity 1s linear;
    -moz-transition:opacity 1s linear;
    -ms-transition:opacity 1s linear;
    -0-transition:opacity 1s linear;
     transition:opacity 1s linear;
    cursor:point;
}
.myClass li:hover
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity:1;
}

Пожалуйста, проверьте jsFiddle, чтобы убедиться, что он работает ... отрегулируйте время в соответствии с вашими потребностями (с или мс)

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

...