Вы можете сделать фоновый div, который будет анимирован за текстом:
JS -
var $menu = $('#menu'),
$bg = $menu.children('.bg');
$menu.children().not($bg).click(function() {
var $this = $(this);
$menu.children('.active').removeClass('active');
$this.addClass('active');
$bg.css('opacity', 0.5).stop().animate({
left : $this.offset().left
}, 500, function() {
$(this).stop().animate({ opacity : 1 }, 250);
});
});
HTML -
<div id="menu">
<div class="active">
Item 1
</div>
<div>
Item 2
</div>
<div>
Item 3
</div>
<div class="bg"></div>
</div>
CSS -
#menu {
position : relative;
z-index : 1;
}
#menu > div {
z-index : 2;
display : inline-block;
height : 50px;
width : 150px;
text-align : center;
line-height : 2;
}
#menu .bg {
position : absolute;
z-index : -1;
top : 0;
left : 0;
background : transparent url('http://alexcoplan.co.uk/resources/active.png');
}
Вот демоверсия: http://jsfiddle.net/Hwvsb/3/