jQuery 悬停和鼠标悬停 .animate答案

【问题标题】：jQuery hover and mouseout .animatejQuery 悬停和鼠标悬停 .animate
【发布时间】：2013-02-12 22:45:43
【问题描述】：

$(document).ready(function(){
    $("img").hover(function(){
        var text = $(this).attr("alt");
        $("h2").text(text);
    });
    $("img").mouseout(function(){
        $("h2").html("Basic Text");
    });

});

我需要的是 hover() 和 mouseout() 函数的动画，所以每当我将鼠标悬停在其中一个图像上时，它就会显示文本，而每当鼠标离开图像区域时，它就会显示“基本文本”（如上述代码）。它应该看起来像这样： http://jsfiddle.net/xgyaQ/ 但正如您所看到的，我附加了 animate({ opacity: 'toggle' }) 函数仅用于演示目的，它没有按应有的方式运行。

我只需要第一个代码的功能和第二个的动画效果，我不知道应该如何编写 javascript 来实现这一点。

还有一件事——知道我应该改变什么，这样当悬停在图像之间的空白处时基本文本不会显示，因为当你将一个图像悬停到另一个图像时，它看起来并不酷。

谢谢！

附：好的，多亏了 Liquinaut，我使它可以使用 fadeIn 效果，但首先隐藏元素：

$(document).ready(function () {
    $("img").mouseenter(function () {
        var text = $(this).attr("alt");
        $("h2").text(text).hide().fadeIn(400);
    });
    $("ul").mouseleave(function() {
        $("h2").text('Basic Text').hide().fadeIn(400);
    });
});

http://jsfiddle.net/FUnhK/3

这就是我想要的效果。有没有更好的方法来实现它？

【问题讨论】：

标签： jquery hover

【解决方案1】：

我觉得这个样本不错

$(item).hover(function() { ... }, function() { ... });
In your case:

    $("a.button").hover(
       function() {
          $(this).animate({"marginTop": "0px"}, "fast");
       },
       function() {
          $(this).animate({"marginTop": "16px"}, "fast");
       }
    );

【讨论】：

【解决方案2】：

这可能是您需要的，基于您的 HTML/CSS：

$(document).ready(function () {
    $("img").mouseenter(function () {
        var text = $(this).attr("alt");
        $("h2").text(text);
    });
    $("ul").mouseleave(function() {
        $("h2").text('Basic Text');
    });
});

尽管如此，您应该考虑重新构建 CSS 的某些部分，因为内部带有绝对定位的图像元素的浮动列表元素没有任何意义。

嘿嘿，利奎那

【讨论】：

谢谢，这确实解决了我的第二个问题，但是动画呢？