当鼠标悬停时，jQuery的显示/隐藏功能

Question

我有三个链接：猫，狗，蛇。当我悬停在每个链接上时，与每个链接相关的内容应该改变。

因此，如果我悬停在猫上，那么猫的内容将出现，如果我悬停在狗上，猫的内容将平滑地消失，并显示狗的内容...以此类推。

链接为：狗  猫  蛇

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

我该如何使这个完全工作，并实现一些平滑的淡入淡出效果？

- jayjay

---

我会使用jQuery选项卡 :) 它更好，可以使用鼠标悬停选项，http://jqueryui.com/demos/tabs/#mouseover演示链接，我知道这可能不是你想要的，但是你可以使用它，并且还有免费的主题 :) - Val

不要这样，我不喜欢。 - jayjay

Answer 1

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

其他的都是一样的。

对于平滑的淡入效果，您可以使用fadeIn和fadeOut。

- Vivek

---

你能否在http://jsfiddle.net上展示一个例子，这将非常有帮助。 - jayjay

Answer 2

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>

-编辑-

好的，这里是 -- JSFiddle。

- user657496

---

嘿，这太完美了...非常感谢...我觉得我可以在此基础上继续开发...现在我可以直观地看到你是如何做到的。 - jayjay

好听到了！很高兴能够帮助你。如果它有效，请接受这个答案。 - user657496

嘿，我还需要帮忙。我想要这样做：当鼠标不在它们之上时，没有任何内容显示出来...似乎当鼠标离开前一个链接时，前一个链接的内容仍然显示为可见。 - jayjay

Answer 3

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

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

- Ivan Carrasco Quiroz

---

为了避免队列中出现多个动画效果，您可以在fadeOut或fadeIn之前添加stop()方法，例如 $(".producto").stop().fadeIn();。该方法可以使动画立即停止并转到最终状态，以便下一个动画效果可以立即开始执行。 - Zitrax

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);
});

将两者结合起来，您只需在悬停回调中插入动画即可（类似于以下方式，请将其用作参考）：

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

- Tejs

Answer 5

这段代码也可以工作。

$(".circle").hover(function() {$(this).hide(200).show(200);});

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:black;
    line-height:100px;
    text-align:center;
    background:yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="circle">hover me</div>

- eQ19