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

admin — Tue, 02 Jun 2009 13:11:57 +0000

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

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

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

Зададим стили для кнопки. Ключевым является то, что иконка располагается абсолютно относительно-расположенной ссылки. Подгоним позицию кнопки так, чтобы её тень была внутри блока ссылки. Обратите внимание на то, что в 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качать архив

WebDuty » skype

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