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

我尝试使用jQuery Easing将弹跳垂直效果应用到我的社交导航图标，但我对js不熟悉，所以我需要一些帮助。使用easing1.3.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; 
}

这里是我的问题。

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

我该怎么做才能使背景弹跳鼠标悬停，然后申请一个鼠标“正常”的缓解作用了呢？

我做了一个CodePen here

任何帮助将是非常赞赏:) （...和抱歉我不好英语）

来源

2015-04-29 dragoeco

$（this）.animation（1000，“easeOutBounce”}）;必须是$（this）.animation（1000，“easeOutBounce”）; – Grumpy

哎呀，对不起，我的错误。我做了更正。我的问题仍然是开放的，但感谢您对Grumpy的评论。 – dragoeco

这个工程除了在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

来源

2015-04-29 13:42:15 dragoeco

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

回答

相关问题