3

我的情况是这样开始的：我想为 div 的背景图像设置动画，但似乎使用 jquery 我无法检索背景图像的各个位置（背景位置）。所以我想为什么不创建一个对象并为其值设置动画，然后将这些值放入 css 中，但我不知道如何做到这一点。这是我尝试过的。

var obj={t:0};
                $("#wrapper").animate({
                    obj:100 //I tried obj.t & t as well
                },1000,'linear',function(){},function(){
                    $("#wrapper").css({
                            'background-position':obj.t+"% 0%"
                        });
                });

另外我需要问的一个问题是，如果图片真的很大，我的意思是大约4000x4000px，将它设置为背景图像并更改背景位置会更好，还是围绕div本身移动？

4

3 回答 3

5

您需要使用animate 方法的step功能#wrapper，更重要的是您需要为实际对象设置动画..而不是元素

var obj = {
    t: 0
};

$(obj).animate({ // call animate on the object
    t: 100 // specify the t property of the object to be animated
}, {
    duration: 1000,
    easing: 'linear',
    step: function(now) { // called for each animation step (now refers to the value changed)
        $("#wrapper").css({
            'background-position': now + "% 0%"
        });
    }
});

演示在 http://jsfiddle.net/gaby/yPq8s/1/

于 2012-04-22T10:06:55.723 回答
0

如何为背景图像创建一个单独的 div，如果它有内容，然后将该 div 的内容放入另一个 z-index 更高的 div，然后为 div（带有背景图像）本身设置动画，而不是为背景位置设置动画?

我想你的第二个问题的答案与你想要达到的目标有关。虽然如果选择将带有 bg 图像的 div 分配给它自己的 z-index，那么我认为使用 div 的位置本身而不是背景图像的背景位置是值得的。

于 2012-04-22T10:03:27.647 回答
0

您可以使用以下方法检索背景图像的背景位置.css()：

$('#el').css('background-position');

我创建了一个简单的 JS Fiddle 动画背景图像：

http://jsfiddle.net/yPq8s/

于 2012-04-22T09:55:02.923 回答