javascript - jQuery UI Bounce Effect with CSS Sprite Image -

im trying make social icons bounce using jquery ui bounce effect. im working off template & docs jquery. rest im trying write html,css & js myself have errors in there. im having problem getting icons bounce. think because im using sprite image social icons.

can take @ , me out?

the jquery & jquery ui in 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 being used:

#footer {background:#1c1c1c; padding:40px 0 20px;  border-top:4px solid #fff;} #footer {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 {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: 0.2s ease-out; -moz-transition: 0.2s ease-out; -o-    transition: 0.2s ease-out; transition: 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 {background-position:0 0;} .social-icons li.social-dribbble {background-position:-30px 0;} .social-icons li.social-facebook {background-position:-60px 0;} .social-icons li.social-envato {background-position:-90px 0;} 

the html of icons positioned.

<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> 

finally, js think need insert , run correctly.

<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> 

you use @keyframes animation effect.

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

check out animate.css dan eden has created plug , play animation library cool things this.