0

我有一些我正在使用 JQuery.show()和.hide()函数的 div，但是我无法更改效果/方向。

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 函数的原因。

尝试查看文档和在线教程，但无法找出它不起作用的原因。

4

1 回答 1

3

对于“增强”动画效果，您必须包含 jQuery UI 库（或者可能只是动画核心的特定实现）。

从 API 页面show()：

从 jQuery 1.4.3 开始，可以使用命名缓动函数的可选字符串。缓动函数指定动画在动画中不同点的进展速度。jQuery 库中唯一的缓动实现是默认的，称为摇摆，以及以恒定速度进行的一种，称为线性。使用插件可以使用更多的缓动功能，最著名的是jQuery UI 套件。

所以'just' jQuery 可用的命名动画是'linear' 和'swing'。包括 jQuery UI 会打开其他几个（链接，因为转录它们似乎毫无意义）。

要从他们的 CDN 链接到 Google 托管的 jQuery UI：

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

参考：

于 2012-08-27T22:06:36.083 回答