0

コードがあり、単純なホバー効果があり、jQuery 1.4では正常に機能しますが、jQuery1.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で操作するコンテンツの上に透明な輝きのようなPNGを移動しonmouseoverます。onmouseoutしたがって、この効果は2番目の関数で繰り返されるべきではありません。

何らかの理由で、この超基本的なコードは最新のjQuery 1.7では機能しませんが、1.4では機能します。

ドキュメントを読みましたが、正しい方法を使用しているようです。ホバーします。私のコードのどこに問題があるようですか？

編集：

jsfiddle

http://jsfiddle.net/3QRGD/

4

1 に答える 1

0

step「役に立たない」CSSプロパティ（つまり、境界線の間隔、レイアウトに影響を与えない、おそらく決して使用しないもの）を指定してjQueryAnimate関数を使用してみることができます。

デモ： 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 に答える