我试图让我的社交图标反弹使用jQuery UI弹跳效果。我正在关闭一个模板& jQuery的一些文档。其余的即时只是试图写自己的HTML,CSS & JS,所以我可能在那里有一些错误。我有一个问题让图标反弹。我认为这可能是因为即时通讯使用社交图标的精灵图像。jQuery UI弹跳效果与CSS雪碧图像
有人可以看看它并帮助我吗?
jQuery的& jQuery的用户界面在头
<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>
也许你可以在[jsfiddle](http://jsfiddle.net/)上创建一个例子吗? – 2013-03-24 23:36:00
http://jsfiddle.net/WFEDH/ ...张贴更多的代码将帮助我们回答这个问题.... – 2013-03-24 23:36:53
此外,这是jQuery的旧版本。你是否因任何理由限制使用1.5? – 2013-03-24 23:38:09