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 UI库（或者可能只是动画核心的特定实现）。

来自show()的API页面：

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

因此'just'jQuery提供的命名动画是'线性'和'摇摆'。包括jQuery UI打开several others（链接，因为它似乎无意义地转录它们）。

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

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

参考文献：

Google's CDN code library。
show()。

.show（）不会改变效果或方向

1 个答案: