2

いくつかのdivの背景位置をアニメーション化してから、同じことを行うコールバックアニメーションを作成しようとしています。

ここで何が欠けていますか？

HTML：

<div>
    <div class='divimg'></div>
    <div class='divimg'></div>
    <div class='divimg'></div>
</div>
​

CSS：

.divimg {
    width:250px;
    height:250px;
    margin:20px;
    float:left;
    background-size: 500px 500px;
    background-position: top center;
    background-repeat: no repeat;
    background-image: url(http://lorempixel.com/186/116/nature/1);
}​

JavaScript：

$(function() { 
    function animateGrid() {  
        $('.divimg').animate(
            {backgroundPosition:"bottom center"}, 
            500, function() { 
                $('.divimg').animate(
                    {backgroundPosition:"top center"}, 
                500)
            }
        );   
    }
    animateGrid(); 
})​

http://jsfiddle.net/jc6212/WPF6H/2/

4

1 に答える 1

3

.animate()ドキュメントから：

以下に示す場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。[...] 簡略化された CSS プロパティ (フォント、背景、境界線など) は完全にはサポートされていません。

backgroundPositionYあなたがやっているのと同じようにアニメーション化するには、Chrome でそのプロパティを単純にアニメーション化できます。Firefox は をサポートしていないため、サポートしていないブラウザーにCSS フックbackgroundPositionYを適用できます。

if (!('backgroundPositionY' in document.createElement('div').style)) {
    $.cssHooks.backgroundPositionY = {
        get: function(elem, computed, extra) {
            return $.css(elem, 'backgroundPosition').split(' ')[1];
        },
        set: function(elem, value) {
            elem.style.backgroundPosition = $.css(elem, 'backgroundPosition').split(' ')[0] + ' ' + value;
        }
    };
}


$(function() {

    function animateGrid() {
        $('.divimg').animate({
            backgroundPositionY: 250
        }, 500, function() {
            $('.divimg').animate({
                backgroundPositionY: 0
            }, 500);
        });
    }

    animateGrid();
});

Chrome、FF、IE9 でテスト済み。すべてのブラウザで動作するはずです。

jsフィドル

于 2012-11-18T18:18:50.880 に答える