Want to give your social icons a bounce effect using jQuery UI Bounce? I'm following a template and some jQuery documentation, but having trouble getting it right. It seems like the sprite image for the icons might be causing the issue.
Can someone have a look and assist me?
The necessary jQuery & jQuery UI scripts in the header:
<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>
The CSS styles being used:
#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;}
/* more CSS styles here */
The HTML structure where the icons are placed:
<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>
And here is the script that should make them bounce:
<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>