преобразование CSS-парения в JQuery Hover - PullRequest
Новая
       19

преобразование CSS-парения в JQuery Hover

3 голосов
/ 05 декабря 2009

Я создаю сайт с эффектами наведения. См. http://vitaminjdesign.com/index.html и посмотрите на раздел услуг в правом нижнем углу. Я использую: наведите курсор, чтобы изменить цвет фона. Я хочу использовать jquery для достижения того же результата с элегантным исчезновением. Вот мой HTML: 

<div class="iconrow">
   <a href="#"><img src="images/icon1.png" border="0" width="35" />
   <h2>Website Design</h2></a>
</div>

(повторяется 6 раз с разными изображениями и текстом)

По сути, при переворачивании .iconrow я хочу, чтобы фон изменился с none на background-color: #cccccc; и когда он скатывается, обратно в никуда.

Ответы [ 2 ]

4 голосов
/ 05 декабря 2009

Вам понадобится плагин цветной анимации jquery: http://plugins.jquery.com/project/color

А потом какой-то код, подобный этому 

$(".iconrow").hover(
    function() {
        $(this).animate( { "background-color": "#ccc" }, normal );
    },
    function() {
        $(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
    }
);

EDIT:

Согласно комментарию dcneiner'а, если вы хотите, чтобы конечный цвет был нулевым, вам нужно добавить функцию обратного вызова в анимацию, чтобы изменить цвет на "none" после того, как он завершит анимацию. Я предполагаю, что анимация "нет" не определена. Вы можете изменить #fff на цвет, близкий к фону, чтобы помочь сгладить окончательный переход.

Анимированная подпись: 

animate(params, [duration], [easing], [callback])
0 голосов
/ 05 декабря 2009

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

Вы не сможете анимировать от transparent до цвета, за исключением Safari и Firefox 3.5 и других браузеров, которые поддерживают цвета фона RGBA. Если вы ищете кросс-браузерную поддержку, я бы напал на проблему следующим образом:

1. Установите для ваших эффектов наведения по умолчанию область действия, отличную от класса js, поэтому эффекты :hover будут работать как запасной вариант. Отличный способ сделать это следующим образом: 

<html class="no-js">
   <head>
     .... meta, title, link tags ...
     <script type="text/javascript">document.documentElement.className = "js";</script>
     .... other scripts ...
   </head>

Это изменит no-js на js еще до того, как страница отобразится.

2. Используйте jQuery для добавления фиктивных элементов рядом с вашими тегами a (js для добавления фиктивного элемента на шаге 3)

Вот CSS для использования: 

.js .iconrow { background: none !important } /* Hide current hover effect */

.iconfader {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #ccc;
  z-index: 5;
}

.iconrow { position: relative } /* Spans are absolute, need the parent to be relative */
.iconrow a { position: relative; z-index: 10} /* Needs to sit on top */

3. Появление и уменьшение нового фиктивного элемента на mouseenter и mouseleave

$('.iconrow').each(function(){
   var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
   $(this).hover(function(){
       $span.stop().animate({opacity: 0.8}, 200);
   }, function(){
       $span.stop().animate({opacity: 0.0}, 200);
   });
});

Наконец, будьте осторожны, если вы решите использовать фоновое изображение вместо сплошного цвета. IE7 и IE8 не могут изменять непрозрачность 24-битных файлов PNG. Это полностью портит прозрачность.

...