hover时JQuery显示/隐藏

我有三个链接，猫，狗，蛇。 当我将鼠标hover在每个链接上时，与每个链接相关的内容应该更改。

因此，如果我将鼠标hover在猫身上，那么猫的内容就会出现，如果我将鼠标hover在狗身上，猫的内容将会顺利消失，狗的内容将会出现……依此类推。

链接是：狗猫蛇

  Cat Content  Dog Content  Snake Content  

如何让这个完全成熟，有一些平滑的褪色？

Answer 1

 ('.cat').hover( function () { $(this).show(); }, function () { $(this).hide(); } ); 

对其他人来说也是如此。

对于平滑淡入，您可以使用fadeIn和fadeOut

Answer 2

jQuery的：

 $('div.animalcontent').hide(); $('div').hide(); $('p.animal').bind('mouseover', function() { $('div.animalcontent').fadeOut(); $('#'+$(this).attr('id')+'content').fadeIn(); }); 

HTML：

 
dog url
Doggiecontent!
 
cat url
Pussiecontent!
 
snake url
Snakecontent! 

-编辑-

是的， 在这里你去 – JSFiddle

Answer 3

我希望我的脚本可以帮到你。

 mostrar... 
Producto 

我的剧本

Answer 4

由于您使用的是jQuery，因此您只需附加一些特定事件和一些预定义的动画：

 $('#cat').hover(function() { // Mouse Over Callback }, function() { // Mouse Leave callback }); 

然后，要制作动画，您只需要调用fadeOut / fadeIn动画：

 $('#dog').fadeOut(750 /* Animation Time */, function() { // animation complete callback $('#cat').fadeIn(750); }); 

将两者组合在一起，您只需在hover回调中插入动画（类似于此，将其用作参考点）：

 $('#cat').hover(function() { if($('#dog').is(':visible')) $('#dog').fadeOut(750 /* Animation Time */, function() { // animation complete callback $('#cat').fadeIn(750); }); }, function() { // Mouse Leave callback });