Анимация backgroud-position на jquery

5 Июль / 2011

Фоновое изображение у блока мы не можем двигать используя jquery функцию animate, точнее можем но плавного перехода не будет. Поэтому вашему вниманию предлагаю хороший плагин jquerybackgroundposition. Используя этот плагин и технологию спрайтов можно делать вопервых красивые меню навигации, а также небольшие анимации, не прибегая тем самым ко флешу, баннеры точно запросто можно делать.

Пример кода с событием click

$('div#have_background') 
   .click(function(){ 
       $(this) 
            .animate({backgroundPosition: '500px 150px'}) 
        ; 
   });

Вот пример с событием mouseover и mouseout

$('div#have_background').mouseover(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px 0px)'},'fast');
        }).mouseout(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px 35px)'},'fast');
        });

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

Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.

В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.

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

Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)

Последнее в нашем блоге

WebАкула