jQuery hover script acts sporadic -

i have basic jquery script that, when image hovered pushes image up. hover doesnt work expected. wonder if there's else can add in script make function expected time , not intermittently.

jquery(document).ready(function() {      $("#image-list a").hover(function() {             $(this).stop().animate({ margintop: "-10px" }, "fast");             $(this).parent().find("span").stop().animate({ margintop: "18px", opacity: 0.25 }, "fast");         },function(){             $(this).stop().animate({ margintop: "0px" }, "fast");             $(this).parent().find("span").stop().animate({ margintop: "1px", opacity: 1 }, "fast");         });            // create custom animation algorithm jquery called "bouncy"     $.easing.bouncy = function (x, t, b, c, d) {         var s = 1.70158;         if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;     }      // create custom tooltip effect jquery tooltip     $.tools.tooltip.addeffect(         "bouncy",      // opening animation     function(done) {         this.gettip().animate({top: '+=10'}, 300, 'bouncy', done).show();     },      // closing animation     function(done) {         this.gettip().animate({top: '-=10'}, 50, 'bouncy', function()  {         $(this).hide();         done.call();         });     }     );                                                $("a.cat-pics img[title]").tooltip({effect: 'bouncy'});   }); 

html

    <ul id="image-list"> <li class=""><a class="cat-pics" href="http://www.greatshield.com/dev/products/devices/apple/"><img src="<?php echo bloginfo('template_url'); ?>/images/iphone-5.jpg" title="iphone 5"/></a></li> </ul> 

link http://www.greatshield.com/dev/products/device-type/smartphones/

you apply tooltip on img, hover on a

instead of hovering on a try hovering on img

$("#image-list img").hover(function() { 

or @ least make both same 1 way or other. think img margins messing up.