Question

我有一个基本的jquery脚本，当图像悬停时，将图像向上推。悬停它有时无法按预期工作。我想知道我的脚本中是否还有其他任何内容可以让它始终按预期运行，而不仅仅是间歇性地运行。

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

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

Answer 1

您在img上应用工具提示，但将鼠标悬停在a上

而不是悬停在a上，请尝试将鼠标悬停在img

上

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

或至少使这两种方式相同。我认为img利润正在弄乱你。

jQuery悬停脚本是零星的行为

1 个答案: