JQuery显示/隐藏时悬停

我有三个链接，猫，狗，蛇。当我将鼠标悬停在每个链接上时，与每个链接有关的内容都应该改变。JQuery显示/隐藏时悬停

因此，如果我将鼠标悬停在猫身上，那么猫的内容就会出现，如果我将鼠标悬停在狗身上，猫的内容将会顺利消失，狗的内容将会出现......等等。

 
Links are: Dog Cat Snake

<div> 
    <span style="display:none;"> Cat Content</span> 
    <span style="display:none;"> Dog Content</span> 
    <span style="display:none;"> Snake Content</span>  
</div>

我如何获得这是完全成熟的工作，有一些光滑的衰落？

来源

2011-03-23 jayjay

我可以使用jQuery标签:)它的要好得多，并使用鼠标选项，http://jqueryui.com/demos/tabs/#mouseover演示链接，我知道它可能不是你的正确的事情，但嘿，你可以使用它，也有免费的主题:) – Val 2011-03-23 12:00:44

没有这种方式，我不喜欢 – jayjay 2011-03-23 12:39:16

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

对于其他人也是如此。

对于你顺利褪色可以使用fadeIn和fadeOut

来源

2011-03-23 11:57:26 Vivek

有无论如何，你可以在http://jsfiddle.net上显示一个例子，它会真的帮助。 – jayjay 2011-03-23 12:26:46

的jQuery：

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

HTML：

<p class='animal' id='dog'>dog url</p><div id='dogcontent' class='animalcontent'>Doggiecontent!</div> 
<p class='animal' id='cat'>cat url</p><div id='catcontent' class='animalcontent'>Pussiecontent!</div> 
<p class='animal' id='snake'>snake url</p><div id='snakecontent'class='animalcontent'>Snakecontent!</div>

CNC中

对没错，here you go -- JSFiddle

来源

2011-03-23 11:58:00 rsplak

嘿，你可以在http://jsfiddle.net上看到这个，这将是真正有帮助 – jayjay 2011-03-23 12:25:46

嘿，这是完美的...非常感谢...我想我可以建立在这..现在我看到你是怎么做的它。 – jayjay 2011-03-23 12:41:27

好听！很高兴我能帮上忙。它解决了，请接受这个答案。 – rsplak 2011-03-23 12:48:23

由于您使用jQuery的，你只需要连接到一些具体的事件和一些预定义的动画：

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

然后，做动画，你只需要调用淡出/淡入动画：

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

结合两者结合起来，你只需插入动画在悬停回调（类似的话，用这个作为参考点）：

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

来源

2011-03-23 11:58:40 Tejs

嘿有无论如何你可以显示在http://jsfiddle.net – jayjay 2011-03-23 12:25:19

我希望我的脚本能帮助你。

<i class="mostrar-producto">mostrar...</i> 
<div class="producto" style="display:none;position: absolute;">Producto</div> 

<script>$(".mostrar-producto").mouseover(function(){ 
     $(".producto").fadeIn(); 
     }); 
     $(".mostrar-producto").mouseleave(function(){ 
     $(".producto").fadeOut(); 
     }); 
</script>

:-)

来源

2014-08-12 20:25:48

为了避免排队许多动画，你可以在fadeout或fadeIn之前添加stop（），比如'$（“。producto”）。stop（）。fadeIn ）;'。 – Zitrax 2017-05-18 20:51:59

JQuery显示/隐藏时悬停

回答

相关问题