Question

我需要一些帮助：s 当我将鼠标悬停在一个div上时，我希望启动两个动画（它是一个按钮，顶部部分我想要淡入淡出，底部部分是一个向下翻转的不透明度）。我在这里检查了几个问题，我理解它应该如何工作，但我对jquery很新，而且我陷入了如何让两件事情同时工作......以及我应该把悬停放在哪里行动。

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

辊轧：

$(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的背景更改为红色以进行测试。

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

1 个答案: