• Страница 1 из 1
  • 1
Архив - только для чтения
Модератор форума: andycrowz  
Форум » Корзина форума » Корзина » Нужен скрипт для плавного изменения бекграунда [JS] (Jquery)
Нужен скрипт для плавного изменения бекграунда [JS]
Arhaler12
Скаут
Собственно нужен скрипт, который будет менять background-image у ссылки, при наведение курсора. У кого добрая душа, помогите пожалуйста разобраться с этим.
Через css3 всё отлично работает, но увы только в Google Chrome, остальные браузеры с ним не дружат, либо я что-то криво делаю.

Грубый пример:

Код

CSS

.button_home {
   height: 64px;
   width: 320px;
   background-image: url(img/button2.png);
   position: absolute;
   text-align: center;
   padding-top: 36px;
}
.button_home a {
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   background-image: url(img/button2.png);
   background-repeat: no-repeat;
   margin-top: -36px;   
}
.button_home a:hover {
   background-image: url(img/button3.png);
}


Код

HTML

<ul>   
    <li>
      <div class="button_home">
        <a name="Home" href="#">Главная</a></div>
          </li>
         </ul>


Вот таким кодом JSa не отображается текст ссылки, т.е. "Главная", видно только картинку. Появляется только после наведения курсора.
Код

(function() {
$("div.button_home a").css("opacity","0");
});
$(function(){
        $('div.button_home a')
    .css({ 'backgroundImage':'url("img/button3.png")'})     
    .hover(function(){
              $(this)
               .stop()
              .animate({ 'opacity': 1}, 500);},
    function(){
              $(this)
                .stop()
                .animate({'opacity': 0 }, 500); });
});

Уже всё перерыл, ничего толкового не нашёл, пробовал через плагин BackgroundImageTransition, с ним тоже не пошло, уже не знаю куда и податься-то, в этом деле новичок.
Кто дружит с этим делом, помогите, буду очень благодарен.
Сообщение # 1 отредактировано Arhaler12 - Среда, 02.09.2015, 12:53
No_MaTTeR
Старший Маршал
Попробуй почитать здесь, возможно поможет - http://shpargalkablog.ru/2013/09/hover-javascript.html
Сообщение # 2 написано 02.09.2015 в 13:57
Arhaler12
Скаут
Цитата No_MaTTeR ()
Попробуй почитать здесь, возможно поможет - http://shpargalkablog.ru/2013/09/hover-javascript.html

Не совсем то, что нужно
Сообщение # 3 написано 03.09.2015 в 14:33
beneben
Рыцарь
Почему только в хром? Что за бредятина?! Отображается во всех браузерах,кроме IE 6-.... и прочие версии этого дерьма.

Добавлено (03.09.2015, 15:49)
---------------------------------------------
Вот тебе пример работы. И на будущее - все браузеры (кроме сраного IE и телефонные браузеры(не все)) поддерживают CSS3 , забудь про этот JS.

Код
http://ruseller.com/lessons.php?rub=2&id=986
Продам аккаунт Battle.net с персонажами WoW.
Все предложения и подробности в личку.
Первый персонаж.
Второй персонаж.
Сообщение # 4 написано 03.09.2015 в 15:49
Arhaler12
Скаут
Цитата beneben ()
очему только в хром? Что за бредятина?! Отображается во всех браузерах,кроме IE 6-.... и прочие версии этого дерьма.
Добавлено (03.09.2015, 15:49)
---------------------------------------------
Вот тебе пример работы. И на будущее - все браузеры (кроме сраного IE и телефонные браузеры(не все)) поддерживают CSS3 , забудь про этот JS.
Код
http://ruseller.com/lessons.php?rub=2&id=986


Такой код и я написать могу. Ты невнимательно читал мой пост... Мне нужна замена бекграунда ссылки и чтобы текст ссылки оставался не месте, не исчезал, не сдвигался, как в твоём примере (text-indent).
Сообщение # 5 написано 04.09.2015 в 15:19
Форум » Корзина форума » Корзина » Нужен скрипт для плавного изменения бекграунда [JS] (Jquery)
  • Страница 1 из 1
  • 1
Поиск: