4.3.3 滑上和滑下

发表于 更新于 分类于 ， ， Waline： 本文字数： 614 阅读时长 ≈ 1 分钟

4.3.3 滑上和滑下

文档流之外的元素适合淡入淡出

对于本来就处于文档流之外的元素,比较适合使用淡入和淡出动画。例如,对于那些覆盖在页面之上的”亮盒”元素来说,采用淡入和淡出就显得很自然。

不过,假如某个元素本来就处在文档流中,那再调用.fadeIn()就会导致文档”跳一下”,以便为新元素腾出地方来。但这种跳跃感在用户眼里就不总是那么美观了。

滑上滑下

,假如某个元素本来就处在文档流中,使用jQuery的.slideDown()和.slideUp()方法通常是正确的选择。这两个动画方法仅改变元素的高度。要让段落以垂直滑入的效果出现,可以像代码清单4-10这样调用.slideDown('slow')。

1
2
3
4
5
6
7
8
$(document).ready(function() { 
  $('p').eq(1).hide();   
  $('a.more').click(function(event) { 
    event.preventDefault(); 
    $('p').eq(1).slideDown('slow');  
    $(this).hide(); 
  }); 
});

要实现相反的动画效果,应该调用.slideUp()。

两个方法的效果

  • .slideDown()向下滑动,最终的效果是显示.
  • .slideUp()向上滑动,最终的效果是隐藏