CODEWITHSUNDEEP
jquery
thesanerone
thesanerone

Reputation: 87

jQuery smooth scroll background image horizontally?

I have a banner towards the top of a development site. I have the image scrolling left-right with the jquery below. It's abit choppy and freezes when other jquery function are in use such as phishing or a jquery image rotator.

My question is, is there a better solution that will help scroll the image smoothly?

var $jg = jQuery.noConflict();
$jg(document).ready(function() {
    var xAdd = 0;
    var scrollInterval = setInterval(function(){
        xAdd++;
        if(xAdd >= 1200){
            xAdd = 0;
        }
        $jg('#clouds').css('background-position',xAdd + 'px ');

    },100);
});

Upvotes: 0

Views: 1070

Answers (1)

dSquared
dSquared

Reputation: 9825

Try using jQuery's $.animate() like this:

var $jg = jQuery.noConflict();
$jg(document).ready(function() {
    // Animate Cloud Loop //
    function cloud_loop($target, val){        
        $target.animate({'background-position' : val+'px'}, 'fast', 'linear', function(){
            $target.css('background-position','0');                
            cloud_loop($target, val);
        });
    }

    // Start Animation Loop //
    cloud_loop($jg('#clouds'), 1200);
});

Use can change the 'fast' parameter in the function to 'slow' or a ms value for the complete animation.

I hope this helps!

EDIT: Tanks to Chad and Joseph for the 'linear'!

Upvotes: 3

Related Questions