多個.hover動畫函數

Question

我想弄清楚如何在同一個懸停函數中結合.animate語句。

基本上，我有一個圖像，當我將鼠標移到div上時，滑動到右側，而新圖像滑入以替換它。

下面的代碼我到目前爲止：

//Set div dimensions equal to image's dimensions: 
$('#image_holder').width($('#image_1').width()); 
$('#image_holder').height($('#image_1').height()); 

//tell the browser what to do when hovering on the div: 

$('#image_holder').hover(function() { 
//when mouse hover: 
$('#image_0').animate({right: '-' + $(this).width() + 'px'}, /*duration*/360, /*ease*/'swing');  
$('#image_1').animate({right: '0px'}, /*duration*/360, /*ease*/'swing'); 
}, 

function() { 
//when mouse out, no hover: 
    $('#image_0').animate({right: '0px'}, /*duration*/360, /*ease*/'swing'); 
    $('#image_1').animate({right: '-' + $(this).width() + 'px'}, /*duration*/360, /*ease*/'swing'); 
}); 

而我的HTML是非常簡單的：

<div id="image_holder" class="image_holder"> 
    <img id="image_0" class="image" src="images.png" /> 
    <img id="image_1" class="image" src="images_hover.png" /> 
</div> 

眼下，第一圖像（image_0）不滑出，但第二圖像（image_1）不滑入。我有一種感覺，這是簡單的東西我搞亂了...

任何意見將不勝感激。

謝謝。

Answer 1

這似乎是在這裏工作：http://jsfiddle.net/maniator/XevTC/1/

下面是一些更新我想你要做：http://jsfiddle.net/maniator/XevTC/2/（但我可能永遠是錯的）

---

我覺得這是你想要的：http://jsfiddle.net/maniator/XevTC/11/

Answer 2

編輯

檢查Neal的答案，您的代碼似乎正在工作。

但是，閱讀你的問題，好像你想要的東西像this？