javascript。悬停时的动画逻辑

Question

我有这块内容，我想要显示和隐藏与动画悬停。

首先，我有一个默认的内容元素。如果列表中没有元素被徘徊，那么将会显示一个。当列表中的某个元素被占满时，我想查找相应的content-element并显示它。

我做了一个jsfiddle，显示我的问题。如果你能帮助我用动画做到这一点，那将是非常棒的。谢谢！

任何人都可以在这里提供一些帮助？

jsfiddle.net/xf1b0g9a/2/ 

Answer 1

你可以用一些内置方法尝试像.fadeIn(), .slideDown()等

$(function() { 
 
    //hover 
 
    $('a').on('mouseover', switchContent); 
 
    $('ul').on('mouseout', function(){ 
 
    $(".content").hide(); 
 
    $('.content.default').show(); 
 
    }); 
 

 
    function switchContent(event) { 
 
    var id = $(event.currentTarget).attr('data-id'); 
 
    $(".content").hide(); 
 
    $(".content#" + id).fadeIn(); // use fadeIn() to see a fade effect. 
 
    } 
 

 
});

ul{border:solid 1px red;} 
 
.content{display:none;} 
 
.content.default{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> <a data-id="1" href="#">1</a> 
 
    </li> 
 
    <li> <a data-id="2" href="#">2</a> 
 
    </li> 
 
    <li> <a data-id="3" href="#">3</a> 
 
    </li> 
 
</ul> 
 
<div class="content default"> 
 
    <h4>default.(show if no element is hovered, hide if other element is hovered)</h4> 
 

 
    <p>default text</p> 
 
</div> 
 
<div class="content" id="1"> 
 
    <h4>1</h4> 
 
    <p>1</p> 
 
</div> 
 
<div class="content" id="2"> 
 
    <h4>2</h4> 
 
    <p>2</p> 
 
</div> 
 
<div class="content" id="3"> 
 
    <h4>3</h4> 
 
    <p>3</p> 
 
</div>

_{*：我已经改变了标记点点。}

Answer 2

取而代之的是display属性，使用visibility属性和设置opacity为0。然后使用jquery的animate功能设置opacity到1：

$(".content#"+id).animate({'opacity' : 1});