在div之間滑動重複的背景圖像

Question

如何使用jQuery創建在div之間滑動重複的背景圖像的效果？

看看我這個簡單的fiddle。我正在使用與CSS組合使用的addClass/removeClass jQuery函數來更改哪個div具有背景圖像。這一切都很好。

但是如果我想動畫每個div之間的背景圖像的滑動怎麼辦？

Answer 1

你可以說，被後面的文字動畫背景的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/