advanced code snippet search

Posted By

Friday13 on 02/21/13


Tagged

javascript image jquery background move position animate


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Abiotic


Animate Background Image with jQuery

 / Published in: jQuery
 

URL: http://jquerydemo.com/demo/animate-background-image.aspx

you can animate background image by changing CSS background position property using jQuery setInterval method

Expand | Embed | Plain Text 
  1. (function($) {  
  2.  
  3.             // #your-image is div with the image background
  4.  
  5.             var yourImage = $("#your-image");  
  6.  
  7.             yourImage.css('backgroundPosition', '0px' + ' ' + '0px');
  8.  
  9.             window.setInterval(function() {
  10.                 yourImage.css("backgroundPosition", x + 'px' + ' ' + y + 'px');  
  11.                 y--;
  12.             }, 80);  
  13.  
  14. })(jQuery);

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: zmartsen on February 24, 2013

Why not just use .animate()? jQuery's goal is "more for less".. let's stay aligned with that vision, my friend! yourImage.animate({ "background-position-x" : x, "background-position-y" : y });

You need to login to post a comment.