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

  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.