Javascript 带有CSS精灵图像的jQuery UI反弹效果

我试图使用jQuery UI反弹效果让我的社交图标反弹。我正在制作一个模板&jQuery中的一些文档。其余的我只是试着自己写HTML，CSS和JS，所以我可能有一些错误。我有一个问题，让图标反弹。我想这可能是因为我在社交图标中使用了精灵形象

有人能看一下并帮我解决吗

标题中的jQuery&jQuery UI

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"</script>

图标所在位置的HTML

<div id="footer">
        <div class="row">
            <div class="span12">
                <div class="bottom fixclear">
                    <ul class="social-icons fixclear">
                        <li class="title">SOCIAL LOVE</li>
                        <li class="social-twitter">
                            <a href="#">Twitter</a>
                        </li>
                    </ul>

社交之爱

最后，我认为JS需要正确插入和运行

<style type="text/css">
footer li.social-twitter {
width: 32px;
height: 32px;
}
</style>
<script>
$(document).ready(function() {

$("div").mouseenter(function () {
$(this).effect("bounce", { times:3 }, 270);
});

});
</script>

footer li.social-twitter{
宽度：32px；
高度：32px；
}
$（文档）.ready（函数（）{
$（“div”）.mouseenter（函数（）{
效果（“反弹”{次：3}，270）；
});
});

您可以使用@keyframes动画来实现此效果

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
}
40% {
    transform: translateY(-30px);
}
60% {
    transform: translateY(-15px);
}
}

---

Dan Eden创建了一个即插即用的动画库，对于类似的事情来说非常酷。

您可以仅使用CSS3实现相同的反弹效果。

@关键帧

和

动画

属性将完成此工作。下面是中的工作示例。每个图像都在

悬停时反弹

也许您可以在？…上创建一个示例。。。发布更多代码将帮助我们回答这个问题……而且，这是jQuery的旧版本。你是否因为任何原因限制使用1.5？我设法让它工作。但是我遇到的新问题是，在反弹之后，一些图标落在了错误的位置（当我快速移动图标，它们同时反弹时，似乎会发生这种情况）参见SS:

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
}
40% {
    transform: translateY(-30px);
}
60% {
    transform: translateY(-15px);
}
}