使用一个 div 启动两个动画 - 如何加入两个脚本以及将动作放在哪里？

Question

我需要一些帮助 :s 我希望当我将鼠标悬停在 div 上时启动两个动画（它是一个按钮，顶部部分我想要淡入淡出颜色，底部部分是向下滚动不透明度）。我在这里检查了几个问题，我明白它应该如何工作，但我对jquery真的很陌生，我陷入了如何让两件事同时工作的困境......以及我应该将悬停放在哪里行动。

这些是我想要转换为一个的两个脚本：

ROLLDOWN:

$(function() {
    $('.hoverImg').css({"top" : "-170px"});
    $('.jwrap').hover(function() {
        $(this).children('.hoverImg').stop()
            .animate({"top" : "0"}, 300);
    }, function() {
        $(this).children('.hoverImg').stop()
            .animate({"top" : "-170px"}, 300);
    });
});

FADE:

$(document).ready(function(){
    $("img.a").hover(function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    }, function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

这是 html：

<div class="jwrap">
    <img src="image/Q1bigOff.png" alt="Image1"  />
    <img src="image/Q1bigOn2.png" alt="Image2" class="hoverImg" />
</div>

<div class="fadehover">
<img src="image/Q1Off.png" alt="" class="a" />
<img src="image/Q1On.png" alt="" class="b" />
</div>

现在，我猜我可以在这两种效果之上做一个大的，并在我悬停它时启动我的操作？如果您能帮助我使用该代码...我将非常感激。

Answer 1

我相信这就是您想要做的：

http://jsfiddle.net/CVfLp/3/

我将动画移至函数中，以便我们可以在任意位置触发它们。使用 jquery find 方法，我确保只为父 div 的子元素设置动画。您需要用 jquery select 函数包装 this 才能访问 jquery 函数，如下所示：$(this)。

出于测试目的，将父 div 的背景更改为红色。