0

我有一个代码，一个简单的悬停效果，在 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. _ 因此，不应onmouseout在第二个功能上重复该效果。

出于某种原因，这个超级基本代码在最新的 jQuery 1.7 中无法使用，但在 1.4 中仍然可以使用。

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

编辑：

jsfiddle

http://jsfiddle.net/3QRGD/

4

1 回答 1

0

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

演示：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
        });
    });
});​
于 2012-10-10T14:46:55.773 回答