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