2

这是我的代码：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 来实现这一点。

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

谢谢！

PS好的，多亏了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

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

4

2 回答 2

1

我认为这个样本很好

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

    $("a.button").hover(
       function() {
          $(this).animate({"marginTop": "0px"}, "fast");
       },
       function() {
          $(this).animate({"marginTop": "16px"}, "fast");
       }
    );
于 2013-02-12T13:34:24.677 回答
0

根据您的 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, 利奎那

于 2013-02-12T13:48:34.040 回答