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');
})
You put the
easing:
specifier in the wrong position. It should be like this: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!