Question

我有一个代码，一个简单的悬停效果，在jQuery 1.4中工作正常但在jQuery 1.7中不起作用

以下是代码：

jQuery(document).ready(function() {
    /* When a thumbnail is hovered over do shine */
    $('.large_thumb').hover(function() {
        $(this).find(".large_thumb_shine").css("background-position", "-167px 0");
        $(this).find(".large_thumb_shine").stop().animate({
            backgroundPosition: '167px 0'
        }, 600);
    }, function() {
        $(this).find(".large_thumb_shine").stop().animate({
            backgroundPosition: '167px 0'
        }, 600);
    });
});

应该做什么：

在bg-position上操纵onmouseover的内容上移动透明的类似PNG的PNG。效果不应该在onmouseout上重复，因此是第二个功能。

出于某种原因，这个超级基本代码在最新的jQuery 1.7中不起作用，但仍然适用于1.4。

我已阅读文档，似乎使用了正确的方法，悬停。哪里似乎是我的代码中的问题？

编辑：

的jsfiddle

http://jsfiddle.net/3QRGD/

Answer 1

您可以尝试使用带有“无用”CSS属性的jQuery Animate step函数（即边框间距，您可能永远不会使用的不会影响布局的内容）：

演示：http://jsfiddle.net/SO_AMK/tTddS/

jQuery：

jQuery(document).ready(function() {

    /* When a thumbnail is hovered over do shine */
    $('.large_thumb').hover(function() {
        var shine = $(this).find(".large_thumb_shine");

        $(shine).css("background-position", "-167px 0");
        $(shine).stop().animate({
            "border-spacing": -167
        }, {
            step: function(now, fx) {
                $(shine).css("background-position", now + "px 0px");
            },
            duration: 600
        });



    }, function() {
        var shine = $(this).find(".large_thumb_shine");

        $(shine).stop().animate({
            "border-spacing": -167
        }, {
            step: function(now, fx) {
                $(shine).css("background-position", now + "px 0px");
            },
            duration: 600
        });
    });
});

jQuery 1.7 - 悬停不起作用

1 个答案: