Adds the ability to do background-position animations to jQuery 1.2 and newer.
How to use:

  $('#background').animate({backgroundPosition: '10% 250px'}); 

Example:

  $('#background')
   .click(function(){
       $(this)
            .animate({backgroundPosition: '500px 150px'})
            .animate({backgroundPosition: '-20px 250px'})
        ;
   }); 

Known Issue

Due to a bug in FF 2.0, you have to set your (initial) background-position inline:

  <div style="background-position: 10px 20px"></div> 

Offcurse you can achieve this with JavaScript (jQuery), too:

 $('#background').css({backgroundPosition: '10px 20px'});  

If you don´t set the inline-Style the script will degrade gracefully in FF 2.

Demo: http://www.protofunc.com/scripts/jquery/backgroundPosition/
Download: http://plugins.jquery.com/files/jquery.backgroundPosition.js_7.txt
Source: http://www.protofunc.com/scripts/jquery/backgroundPosition/

Related Listings:

1. jAni – Jquery Animation for Background Images jAni is a simple plugin for jQuery which allows you...
2. Ajax Manager : jQuery Plugin Ajax Manager helps you to manage AJAX requests and responses...
3. Lights Out – Dimming – Covering Background Content with jQuery This is a quick and easy approach that tackles a...
4. jQTouch Cell Phones Animation using Jquery A jQuery plugin for mobile web development on the iPhone,...
5. jParallax – Stunning Animation Effects jParallax has had a major overhaul in readiness to be...

Do you like this post?

Email: