在jquery animate中，如何使用自定义对象而不是div？ [英] In jquery animate, how do I use a custom object instead of a div?

问题描述

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

My situation started like this: I wanted to animate the background image of a div, but it seems, with jquery I can't retrieve the individual positions of the background images(background-position). So I thought why not create a object and animate it's values then just put this values in the css, but i can't figure out how to quite do it yet. Here's what I tried.

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本身移动会更好吗？

Also another question I need to ask is, if the picture is really big, I mean about 4000x4000px, would it be better to set it as a background image and change the background position, or move around the div itself?

推荐答案

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

这篇关于在jquery animate中，如何使用自定义对象而不是div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！