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.
Comments
Post a Comment