jquery backgroud-position animation

We cannot move the background image of the block using the jquery animate function, more precisely, we can, but there will be no smooth transition. Therefore, I bring to your attention a good jquerybackgroundposition plugin. Using this plugin and sprite technology, you can firstly create beautiful navigation menus, as well as small animations, without resorting to flash, banners can definitely be done easily.

Click event code example

$('div#have_background') 
   .click(function(){ 
       $(this) 
            .animate({backgroundPosition: '500px 150px'}) 
        ; 
   });

Here is an example with mouseover and mouseout event

$('div#have_background').mouseover(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px 0px)'},'fast');
        }).mouseout(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px 35px)'},'fast');
        });