Bounce effect to sprite icon using easing1.3.js

Question

I try to apply a bounce vertical effect to my social nav icon using jQuery Easing but I'm not familiar with js and so I need some help.

HTML

<ul class="social">
    <li class="facebook"><a class="bounce" href="http://facebook.com"></a></li>
    <li class="twitter"><a class="bounce" href="http://twitter.com"></a></li>
</ul>

CSS

ul.social li a {
  float: left;
  height: 28px;
  width: 30px;        
  display: inline-block; 
  background: url("http://s14.postimg.org/ufud6x5n1/social.png") no-repeat;
}
ul.social li.facebook a {
  background-position: 0 0;
}
ul.social li.twitter a {
  background-position: -30px 0;
}
ul.social li.facebook a:hover {
  background-position: 0 -28px;
}
ul.social li.twitter a:hover {
  background-position: -30px -28px;
}

And here is my problem.

JS

$(document).ready(function() {
  $('.bounce').hover( function() {
    $(this).animation(1000, "easeOutBounce");
  });
});

How can I do to make the background bouncing on mouse hover and then apply a "normal" ease effect on mouse out?

I made a CodePen here

Any help will be much appreciate :) (...and sorry for my not good english)

$(this).animation(1000, "easeOutBounce"}); must be $(this).animation(1000, "easeOutBounce"); — Grumpy, Apr 29 '15 at 09:55
oops, sorry, my mistake. I made the correction. My question is still open but thanks for your comment Grumpy. — dragoweb, Apr 29 '15 at 12:08

score 0 · Answer 1 · edited May 23 '17 at 11:43

This works except in Firefox. Still investigating...

 $(".bounce").mouseover(function(){
    $(this).stop().animate({'background-position-y':'-28px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
$(".bounce").mouseout(function(){
    $(this).stop().animate({'background-position-y':'0'},{queue:false, duration:800, easing: 'linear'})
});

EDIT: Ok, I found my answer:
1. Using jQuery Background Position Animation Plugin (Found that answer here)
2. And this works also with Firefox

$(".bounce-fb").mouseover(function(){
    $(this).stop().animate({'backgroundPosition':'0 -28px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
$(".bounce-fb").mouseout(function(){
    $(this).stop().animate({'backgroundPosition':'0 0'},{queue:false, duration:800, easing: 'linear'})
});

$(".bounce-tw").mouseover(function(){
    $(this).stop().animate({'backgroundPosition':'-30px -28px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
$(".bounce-tw").mouseout(function(){
    $(this).stop().animate({'backgroundPosition':'-30px 0'},{queue:false, duration:800, easing: 'linear'})
});

Everything is working as I wanted now. See DEMO

Bounce effect to sprite icon using easing1.3.js

1 Answers1