Im trying to make my social icons bounce using the jQuery UI Bounce Effect. Im working off a template & some docs from jQuery. The rest im just trying to write the HTML,CSS & JS myself so i probably have some errors in there. Im having a problem getting the icons to bounce. I think it could be because im using a sprite image for the social icons.Can someone take a look at it and help me out?The jQuery & jQuery UI in the header\[code\]<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>\[/code\]The CSS being used:\[code\]#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;}\[/code\]The HTML of where the icons are positioned.\[code\]<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="http://stackoverflow.com/questions/15605393/#">Twitter</a> </li> </ul>\[/code\]Finally, the JS i think need to insert and run correctly.\[code\]<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>\[/code\]