jqueryjquery-easing

jQuery easing not working in my animate() call


I have 4 circular buttons located towards the central area on my page. Hovering one of them makes it grow in size, but I want to add some easing/bouncing effect to both the growing and shrinking movements of these buttons.

However for some reason the easing part doesn't work. I did add the easing plugin to my page:

<script src='js/jquery.easing.1.3.js'></script> 

Here's the code for the buttons' behaviour:

$('.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');
    })

Solution

  • You put the easing: specifier in the wrong position. It should be like this:

    $(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
                });
            }
        );
    });
    

    Here is a jsFiddle example I prepared for you so you can tweak the settings to your liking:

    DEMO

    And don't forget to check out this easing cheatsheet which gives you a better impression of what each easing function exactly does. Good luck!