jQuery ослабление не работает в моем вызове animate ()

У меня есть 4 круглые кнопки, расположенные по направлению к центральной области на моей странице. При наведении на одну из них она увеличивается в размере, но я хочу добавить некоторый эффект ослабления/подпрыгивания к растущим и сжимающимся движениям этих кнопок.

Однако по какой-то причине смягчающая часть не работает. Я добавил плагин смягчения на свою страницу: 
<script src='js/jquery.easing.1.3.js'></script>

Вот код поведения кнопок: 

$('.egg_button')
    .on('mouseenter', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: -5,
            width: "+=10",
            height: "+=10",
            backgroundSize: "30px",
            specialEasing: {
                width: "easeOutBounce",
                height: "easeOutBounce"
            }
        }, 'fast');
    })
    .on('mouseleave', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: 0,
            width: "-=10",
            height: "-=10",
            backgroundSize: "22px",
            specialEasing: {
                width: "easeOutBounce",
                height: "easeOutBounce"
            }
        }, 'fast');
    })
1 2
jquery jquery-easing

1 ответ:

Вы поставили спецификатор easing: в неправильное положение. Это должно быть так: 

$(document).ready(function(){
    $(".egg_button").hover(
        function() {
            var div = $(this);
            div.stop(true, true).animate({
                margin: -5,
                width: "+=10",
                height: "+=10",
                backgroundSize: "30px",         // Instead of here ..
            }, {
                duration: 500, 
                queue:false, 
                easing: 'easeOutBounce'         // .. put it here
            });
        },
        function() {
            var div = $(this);
            div.stop(true, true).animate({
                margin: 0,
                width: "-=10",
                height: "-=10",
                backgroundSize: "22px",        // Instead of here ..
            }, {
                duration: 500, 
                queue:false, 
                easing: 'easeOutBounce'        // .. put it here
            });
        }
    );
});

Вот пример jsFiddle, который я подготовил для вас, чтобы вы могли настроить настройки по своему вкусу:

Демо

И не забудьте проверить этот чит-лист ослабления, который дает вам лучшее представление о том, что именно делает каждая функция ослабления. Удачи вам!

1