Question

我的情况开始是这样的：我想为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本身移动会更好吗？

Answer 1

您需要使用animate方法的step function，更重要的是，您需要为实际对象设置动画..而不是#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/

Answer 2

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

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

我创建了一个简单的JS小提琴，可以为背景图像添加动画效果：

http://jsfiddle.net/yPq8s/

Answer 3

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

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

在jquery animate中，如何使用自定义对象而不是div？

3 个答案: