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之类的内容？

多个.hover动画功能

2 个答案: