Geek asks and answers

How to animate jquery, how to use custom object instead of div?

My situation began as follows: I wanted to animate the background image of a div, but it seems like with jquery I cannot get the individual positions of the background images (background-position). So I thought, why not create an object and animate its values, but just put those values ​​in css, but I can’t figure out how to do this yet. Here is what I have 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%"
                        });
                });

Another question I need to ask is that if the picture is really big, I mean about 4000x4000 pixels, would it be better to set it as a background image, change the position of the background or move around the div itself?

+3
source share
3 answers

step 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/

+5

.css():

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

JS, :

http://jsfiddle.net/yPq8s/

0

div , , div div, z , div ( ), ?

, , . , div bg z-, , div, .

0

More articles:


All Articles