Question

我尝试使用jQuery Easing将弹跳垂直效果应用于我的社交导航图标，但我不熟悉js，所以我需要一些帮助。

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;
}

这是我的问题。

JS

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

如何在鼠标悬停时使背景弹跳，然后对鼠标应用“正常”缓动效果？

我制作了CodePen here

任何帮助都会非常感激:) （...抱歉我的英语不好）

Answer 1

这在Firefox中除外。还在调查......

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

编辑：好的，我找到了答案：
1.使用jQuery Background Position Animation Plugin（找到答案here）
2.这也适用于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'})
});

现在一切正常。见DEMO

使用easing1.3.js将效果反弹到精灵图标

1 个答案: