.show（）不會改變效果或方向

Question

我有一些div我使用JQuery .show()和.hide()函數，但是我無法獲得改變的效果/方向。

HTML

<li><a class="link" name="box1">HOME</a></li> 
<li><a class="link" name="box2">ABOUT ME</a></li> 

<div id="box1"> 
    SOME CONTENT 
</div> 

<div id="box1"> 
    SOME CONTENT 
</div> 

的JavaScript

$(".link").click(function(){ 
    $('.container').hide(); 
    $('#'+$(this).attr('name')).show(); 
}); 

只需用.show()和.hide()出現工作。 .show('slide')也有效。然而.show('fold')或.show('blind')沒有。也不試圖改變動畫的方向/速度。例如：

$(".link").click(function(){ 
    $('.container').hide('slide', {direction:'up'}, 1000); 
    $('#'+$(this).attr('name')).show('slide', {direction: 'up'}, 1000); 
}); 

重要的是，它顯示了div的倒數第一這就是爲什麼我不是使用.slideDown功能。

試圖尋找在文檔和在線教程，但不能找出爲什麼它不會工作。

Answer 1

對於「增強」的動畫效果，你必須包括jQuery用戶界面庫（或特定的實現或許只是動畫核心）。

從API頁show()：

在jQuery 1.4.3，一個可選的字符串命名的緩解功能可以使用。緩動函數指定動畫在不同點處進行動畫的速度。在jQuery庫的唯一寬鬆的實現是默認的，所謂的搖擺，以及一個進步以恆定的速度，稱爲線性。更寬鬆的功能都可以通過使用插件，最引人注目的是jQuery UI suite的。

因此，'just'jQuery提供的命名動畫是'線性'和'擺動'。包括jQuery UI的打開several others（聯，因爲它似乎毫無意義轉錄它們）。

從他們的CDN鏈接到谷歌託管的jQuery UI：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 

參考文獻：

• Google's CDN code library。
• show()。