Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Стили (CSS) » анимация background

анимация background


     Стили (CSS), jQuery    3159

вопрос
Доброе время суток, есть скрипт изменяющий прозрачность элемента при наведении.


Нужно его модифицировать что бы при наведении менялся параметр background элемента.
при наведении мыши:
background: none ; ---> background: url(../images/pr_play.png) no-repeat center rgba(0,0,0,0.5) ;
и в обратную сторону при убирании мыши. Заранее благодарен

Ответил: cybernatic




$(document).ready(function(){
$('.prew_hov').each(function(){
      $(this).animate({opacity:'0'},1).css('background-image','url("путь до картинки")');
      $(this).mouseover(function(){
          $(this).stop().animate({opacity:'1.0'},200).css('background','');
      });
      $(this).mouseout(function(){
          $(this).stop().animate({opacity:'0.3'},200);
      });
});
});


3 комментария

TheImDim
Юзер

TheImDim - -

Есть много способов, к примеру можно менять класс (toggleClass) либо менять css свойства элемента css( свойства )

maggotische
Юзер

maggotische - -

очень подошел бы вариант с css свойствами

ПафНутиЙ
Админ

ПафНутиЙ - -

В CSS пишем что-то типа такого:
.prew_hov {
background-image:  URL(../images/image.png) no-repeat 1000px 0;
}
.prew_hov:hover {
background-image: URL(../images/image.png) no-repeat 0 0;
}

Каков вопрос - таков и ответ. Просто помните об этом.

Похожие вопросы

наверх