0

我试图使用 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>

正在使用的 CSS：

#footer {background:#1c1c1c; padding:40px 0 20px;  border-top:4px solid #fff;}
#footer a {color:#fff;}
#footer a:hover {color:#d5d5d5;}

#footer .social-icons {float:right;}
#footer .copyright img {float:left; margin-right:20px;}

#footer .copyright p {
font-size:80%;
line-height:140%;
}

#footer .social-icons { }
#footer .social-icons li.title {line-height:30px;}
#footer .social-icons li {margin:0 0 0 10px; }
#footer .social-icons li:first-child {margin-left:0;}

/* social icons */
.social-icons {margin:0 0 20px;}
.social-icons li {display:inline-block; margin:5px;vertical-align: middle;}
.social-icons li a {display:inline-block; width:30px; height:30px; text-indent:-9999px;     background-image:url(../images/social-icons-sprite.png); background-repeat: no-repeat;     position:relative; background-color: #111; -webkit-border-radius:3px; -moz-border-    radius:3px; border-radius:3px;
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-    transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.social-icons li a:hover {background-color:#cd2122; box-shadow:0 0 6px rgba(0,0,0,0.4)}

.social-icons li.social-twitter a {background-position:0 0;}
.social-icons li.social-dribbble a {background-position:-30px 0;}
.social-icons li.social-facebook a {background-position:-60px 0;}
.social-icons li.social-envato a {background-position:-90px 0;}

图标所在位置的 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>
4

2 回答 2

2

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

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

查看Animate.css Dan Eden 创建了一个即插即用的动画库，它非常适合这类事情。

于 2013-03-25T01:19:36.887 回答
0

您可以仅使用 CSS3 实现相同的弹跳效果。@keyframes和animation属性将完成这项工作。这是JSFiddle中的工作示例。每个图像都会反弹hover。

于 2013-06-28T08:25:16.627 回答