Как использовать jQuery для постепенного увеличения / уменьшения цвета фона: hover css? - PullRequest
Новая
       5

Как использовать jQuery для постепенного увеличения / уменьшения цвета фона: hover css?

4 голосов
/ 27 ноября 2011

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

Я пытаюсь анимировать (постепенно увеличивать / уменьшать) цвет фона CSS для ссылки в неупорядоченном списке, когда она находится над ним. Очень важно поддерживать неупорядоченную структуру списка, поэтому я не ищу решение, которое разделяет каждую ссылку на отдельный div и анимирует цвет фона этого.

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

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

<div id="projectContent">
    <ul class="listings">
        <li><a href="*">Another Project</a></li>
        <li><a href="*">Year</a></li>
        <li><a href="*">Location</a></li>
        <li><a href="*">Country</a></li>
        <li><a href="*">Area</a></li>
    </ul>
</div>

Это мой css: 

#projectContent .listings{display:block; width:780px; border-top:1px solid #008BFD;     margin:0; padding:0; float:left}
#projectContent .listings li{list-style:none; padding:0; line-height:1.6em}
#projectContent .listings li a{display:block; width:780px; color:#969991; text-decoration:none; border-bottom:1px solid #666; float:left; padding:0 0 1px 0;background-color:#F5F5F5; }
#projectContent .listings a:hover{background-color:#008BFD; color:#fff;}

Пока все хорошо - однако я искал высоко и низко учебник / плагин, который позволит мне быстро (скажем, 50-100 мс) исчезать в цвете фона, когда ссылки наведены, и постепенно исчезать (скажем, 500-1000 мс), когда курсор перемещается за пределы ссылки.

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

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

Вот несколько примеров jQuery, которые я пробовал: 

var originalBG = $("#projectContent .listings li a").css("background-color");
var fadeColor = "#008BFD"; 

$("#projectContent .listings li a").hover(
    function () {
        $(this).animate( { backgroundColor:fadeColor}, 450 )
    },
    function () {
        $(this).animate( {backgroundColor: originalBG}, 950 )
    }
);

и это очень похоже, но я пытался указать цвет наведения / затухания в CSS ... 

var originalBG = $("#projectContent .listings li a").css("background-color");
var fadeColor = $("#projectContent .listings li a:hover").css("background-color");

$("#projectContent .listings li a").hover(
    function () {
        $(this).animate( { backgroundColor:fadeColor}, 100 )
    },
    function () {
        $(this).animate( {backgroundColor: originalBG}, 900 )
    }
);

Я тоже пробовал это, но цвета указаны в js, а не в css, что не идеально ... 

$('.listings li a').hover(
    function(){
         $(this).stop().animate({backgroundColor: '#f5f5f5'});
    },
    function() {
         $(this).stop().animate({backgroundColor: '#008BFD'});
    }
);

До сих пор мне не везло, что я вообще что-то мог повлиять на мои ссылки! Я очень новичок в jQuery, поэтому, вероятно, делаю что-то очень простое неправильно, но буду очень признателен за помощь экспертов здесь.

Большое спасибо!

Ответы [ 3 ]

9 голосов
/ 27 ноября 2011

Почему бы просто не использовать переходы CSS3? Нет JS вообще. Эффект затухания не будет работать в IE, но это намного более чистый способ реализации. И это очень хорошо. 

a {
   background: #f5f5f5;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

a:hover {
   background: #008BFD;
}
1 голос
/ 27 ноября 2011

Из документации jQuery :

Свойства и значения анимации

Все анимированные свойства должны быть анимированы в одно числовое значение, кроме указанных ниже;большинство нечисловых свойств не могут быть анимированы с использованием основных функций jQuery (например, ширина, высота или слева могут быть анимированы, но цвет фона не может быть, если не используется плагин jQuery.Color () ).

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

Я думаю, что вы хотите, это? jQuery css fade

Демонстрация здесь: Демонстрационная ссылка

...