Делаем кнопку как в Skype с помощью jQuery

Статья от 02.06.09 в категории CSS, Javascript, jQuery
Теги: CSS, jQuery, skype

Skype
Если вы пользуйтесь Skype, я уверен, что вы заметили анимированные кнопки для добавления большего числа людей. При нажатии на нее значок слева “прыгает” по несколько раз. Мне нравится эта анимация. Я покажу вам, как создать ту же кнопку с помощью jQuery и CSS.
Посмотреть пример Cкачать архив
Я говорю об вот этой кнопке:

Задача здесь очень простая – я хочу иконку, которая прыгает несколько раз при наведении на неё курсора (в Skype этот значок прыгает если на него нажать, но я думаю прыгать ему лучше при событии hover).
Итак, кнопка будет состоять из изображения и текста.

<a class="button" href="#">
     <img src="download.png" alt="" />Скачать</a>

Зададим стили для кнопки. Ключевым является то, что иконка располагается абсолютно относительно-расположенной ссылки. Подгоним позицию кнопки так, чтобы её тень была внутри блока ссылки. Обратите внимание на то, что в Firefox кнопка будет с закруглениями. (благодаря свойству -moz-border-radius- ).

.button {
     padding: 4px 10px 3px 30px;
     border: solid 1px #8AB134;
     position: relative;
     cursor: pointer;
     background-image: url('images/bkg.png' );
     background-repeat: repeat-x;
     display: inline-block;
     font-size: 11px;
     height: 16px;
     text-decoration: none;
     color: #40740D;
     -moz-border-radius-bottomleft: 5px;
     -moz-border-radius-bottomright: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright: 5px;
 } 
.button img {
     position: absolute;
     top: -7px;
     left: -8px;
     border: none;
 } 
.button:hover {
     color: #8AB134;
 }

Теперь займемся анимацией. Нам нужно сделать 3 скачка кнопки – один большой и два маленьких. В первый прыжок иконка будет подниматься на 6px, во второй на 3px и в последний прыжок на 2px. После каждого скачка иконка вернётся в своё первоначальное состояние.

$(document).ready(function(){
    $(".button").hover(function(){
        $(".button img")
            // 1 jump 
            .animate({top:"-13px"}, 200).animate({top:"-7px"}, 200)
            // 2 jump
            .animate({top:"-10px"}, 100).animate({top:"-7px"}, 100)
            // 3 jump
            .animate({top:"-9px"}, 100).animate({top:"-7px"}, 100);
    });
});

Код прекрасно работает в Firefox, Safari и IE7+. Меня не волнует работает ли он в IE6.
Посмотреть пример Cкачать архив

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

progg.ru
23/06/09 в 17:35

Делаем кнопку как в Skype с помощью jQuery | WebDuty…

Thank you for submitting this cool story – Trackback from progg.ru…
n1ck
05/07/09 в 15:57

Забыл упомянуть что автор не ты, а во вторых плохо вырезана тень для кружочка, как в исходном варианте ак и здесь – в итоге имитация прошла на четверочку.
Solo
05/07/09 в 16:04

Вот теперь бы вспомнить урл оригинала)
Wattego
30/07/09 в 0:55

В данном модуле есть некорректные обработки событий.
В частности, если человек быстро “пролетел” мышью над объектом не один раз, а скажем два или более, то обработчик событий “считает” их всех как абсолютное число и продолжает прыгать и прыгать ровно столько раз, сколько над ним провели курсором, в то время когда внимание пользователя давно на другом объекте и прыжки кнопки воспринимаются, как зацикленный баг т.е. не учитывает общий тайминг.
А это, я считаю не корректно, не “реалистично”.
NeoMax
22/09/09 в 12:36

нужно бы исправить селектор:
$(“.button img”) внутри функции ховер на $(“.button:hover img”) так как прыгать будут все кнопки одновременно если их несколько

С уважением,
NeoMax
Михаил
16/09/10 в 19:10

NeoMax, а они тогда вообще прыгать перестают.
сергей
29/11/10 в 12:13

Для реализации нескольких кнопок на одной странице, необходимо вместо $(“.button img”) написать (“img”, this)

Оставить комментарий

Подпишись на обновления
через rss или email.

WEBduty.ru css html javascript jquery