Question

这是我的代码： http://jsfiddle.net/FUnhK/

$(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来实现它。

还有一件事 - 任何想法都应该改变，因此当悬停在图像之间的空白区域时基本文本不显示，因为当你将一张图像悬停在另一张图像上时，它看起来并不酷。

谢谢！

P.S。好的，感谢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

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

Answer 1

我认为这个样本很好

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

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

Answer 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的部分内容，因为内部具有绝对定位图像元素的浮动列表元素毫无意义。

CYA， Liquinuat

jQuery悬停和mouseout .animate

2 个答案: