jQuery的悬停及移出.animate

这里是我的代码： http://jsfiddle.net/FUnhK/jQuery的悬停及移出.animate

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

});

我需要的是悬停（）和鼠标移开动画（）函数，所以每当我将鼠标悬停在图像之一，它显示文本，并且每当鼠标离开图像区域时，它就会显示“基本文本”（如上述代码所示）。它看起来应该是这样的： http://jsfiddle.net/xgyaQ/ 但是正如你所看到的，我仅仅为了演示的目的而添加了animate（{opacity：'toggle'}）函数，而且它没有像应该那样工作。

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

还有一件事 - 任何想法，我应该改变什么，所以基本文本不会显示时，悬停在图像之间的空白空间，因为当你悬停形成一个图像到另一个它看起来不酷。

谢谢！

P.S. 好，感谢Liquinaut我把它与淡入效果的工作，但第一隐藏元素：

$(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

这就是我一直在寻找的效果。有没有更好的方法来实现它？

来源

2013-02-12 pres

这可能是你需要什么，根据你的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

来源

2013-02-12 13:48:34 Liquinaut

感谢，真正解决了我的第二个问题，但什么动画？ – pres 2013-02-12 14:01:44

我觉得这个样本是好的

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

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

来源

2013-02-12 13:34:24

jQuery的悬停及移出.animate

回答

相关问题