3

私はこの単純なHTMLを持っています：

<span class="coverImg" style="background-image:url('images/show2.jpg');"></span></a>

といくつかのJavascript：

$(function() {
            $(".coverImg").hover(function() {
                $(this).animate({
                    backgroundPosition : "0 0"
                }, "fast");
            }, function() {
                $(this).animate({
                    backgroundPosition : "50% 50%"
                }, "fast");
            });
        });

そのため、アニメーションがあまり良くなく、イージングがほとんど見られないにもかかわらず、マウスオーバー機能が正しく機能している場合..しかし、マウスアウト機能が機能していない場合、背景画像はピクセル上でも動かずにそこに座っています...

どうしたの？私は何を逃しましたか？

また：

$(function() {
            $(".coverImg").mouseover(function() {
                $(this)
                .animate({
                    "background-position-x" : "-=20px",
                    "background-position-y" : "-=20px"
                }, "fast");
            }).mouseout(function() {
                $(this).animate({
                    "background-position-x" : "0 ",
                    "background-position-y" : "0"
                }, "fast");
            })
        })

これはChromeでのみ機能します...

だから再び何が問題なのか！バグは何ですか！何が恋しいの？

4

2 に答える 2

3

jQueryが背景の位置をデフォルトでアニメーション化できるとは思いません-私はhttp://archive.plugins.jquery.com/project/backgroundPosition-Effectを使用します

標準のCSSはとをサポートしていません。Chromeのようにこれをサポートbackground-position-xしbackground-position-yているのはごくわずかです。

また、jQueryのanimate()メソッドは、同時に2つの値をアニメーション化することをサポートしていません。エラーになるか、一部のブラウザーでは何も実行されないことが判明します。

したがって、結局のところ、これをhttp://snook.ca/archives/javascript/jquery-bg-image-animationsで確認してください。jQuery.bgpos.js背景の位置をアニメーション化する場合は、非常にうまく機能するjQueryプラグインが必要です。

コードは次のようになります。

(function($) {
$.extend($.fx.step, {
    backgroundPosition : function(fx) {
        if(fx.state === 0 && typeof fx.end == 'string') {
            var start = $.curCSS(fx.elem, 'backgroundPosition');
            start = toArray(start);
            fx.start = [start[0], start[2]];
            var end = toArray(fx.end);
            fx.end = [end[0], end[2]];
            fx.unit = [end[1], end[3]];
        }
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
        function toArray(strg) {
            strg = strg.replace(/left|top/g, '0px');
            strg = strg.replace(/right|bottom/g, '100%');
            strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
            var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
            return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
        }

    }
});})(jQuery);
于 2012-01-18T18:29:28.653 に答える
2

jQueryで手間のかかるアプローチを使用しているようです。これは、cssのみで実行できます。

span {
    background: url(yourimage.jpg) top left no-repeat;
    transition: all 3s ease-in-out;
}

span:hover {
    background-position: 50% 50%;
}

背景の位置の変更は、最新のブラウザーではアニメーション化され、IE8以下では静的な変更になります。

transitionプロパティの他のブラウザ固有のプレフィックスバージョンも追加することをお勧めします。

-webkit-transition:  
-moz-transition:  
-o-transition:  
transition:
于 2012-01-18T19:06:42.023 に答える