Впервые эффект при наведении курсора JQuery переходит на конечную точку, обычно после

Question

Вот проблемка:

Загрузите страницу, при первом наведении курсора мыши на вкладках Mail и LinkedIn анимация перейдет к кадру конечной точки. Это должно оживить вкладку.

После первого зависания все в порядке, зависание ведет себя как положено. Пробовал мышиный центр, наведение мыши и зависание. Лично мне больше нравится мышиный центр, но это я. Поведение аналогично кнопкам горизонтальных тем ниже, которые не показывают скачок. Weird.

Код выглядит так:

$("#zipperTabLinkedin a")
    .mouseenter(function(e){
        $(this).animate(
            {padding:'30px 0 0 0'},
            {duration:500},
            {easing:'swing'})
    })
    .mouseleave(function(e){
        $(this).animate(
        {padding:'5px 0 0 0'},
        {duration:500},
        {easing:'swing'})
});

Просто странно. Вы можете увидеть эффект на: http://desertbiz.biz/repl.html

Answer 1

Удалить padding-top в a:hover,

http://jsfiddle.net/7Mwja/6/

Answer 2

Вот решение с переходами css3, которое никогда не выходит из строя.

Скрипка демо

используйте свойство transion для его анимации.

 -webkit-transition:padding-top 0.1s ease-in;

Учебник для переходов CSS3

www.w3schools.com/css3/css3_transitions.asp

(Единственный недостаток - писать кросс-браузерные CSS)