Hi,
Code JavaScript:
$('.slidingElement li').each(function(){
        var bck = $(this).css('background-image');
        $(this).css('background-image',bck.replace('.png','_hover.png'));
    });
   $('.slidingElement li').each(function(){
        var bck = $(this).css('background-image');
        $(this).css('background-image',bck.replace('_hover',''));
    });
    $('.slidingElement li a').hover(
        function()
        {
          var $parent = $(this).parent('li');
          var bck = $parent.css('background-image');
          $parent.css('background-image',bck.replace('.png','_hover.png'));
          $(this).animate({ width: 175+'px' }, 150);
        },
        function()
        {
          var $parent = $(this).parent('li');
          var bck = $parent.css('background-image');
          $parent.css('background-image',bck.replace('_hover',''));
          $(this).animate({ width: 135+'px' }, 150);
        });
I need the background ready to use
in the transition so I ended up with this
fake preloader
Code JavaScript:
$('.slidingElement li').each(function(){
        var bck = $(this).css('background-image');
        $(this).css('background-image',bck.replace('.png','_hover.png'));
    });
   $('.slidingElement li').each(function(){
        var bck = $(this).css('background-image');
        $(this).css('background-image',bck.replace('_hover',''));
    });

Do you have any advice ?

bck.replace('.png','_hover.png') a better way ?