JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】

全部章节   >>>>

---

本章目录

8.1 显示隐藏动画效果

8.1.1 show() 方法与hide() 方法

8.1.2 toggle()方法

8.1.3 实践练习

8.2 淡入淡出动画效果

8.2.1 fadeIn() 方法与fadeOut() 方法

8.2.2 fadeToggle()方法

8.2.3 fadeTo() 方法

8.2.4 实践练习

8.3 滑入滑出动画效果

8.3.1 slideDown() 方法与 slideUp() 方法

8.3.2 slideToggle()方法

8.3.3 实践练习

8.4 自定义动画

8.4.1 简单的动画

8.4.2 移动位置的动画

8.4.3 队列中的动画

8.4.4 动画停止

8.4.5 实践练习

总结：

---

8.1 显示隐藏动画效果

8.1.1 show() 方法与hide() 方法

show() 方法能动态地改变当前元素的高度、宽度和不透明度，最终显示当前元素

hide() 方法会动态地改变当前元素的高度、宽度和不透明度，最终隐藏当前元素

jQuery 对象.show(duration,[fn]);

jQuery 对象.hide(duration,[fn]);

参数duration 表示动画效果运行的时间，可以使用关键字slow、normal 和fast，分别对应时间长度0.6 秒、0.4秒和0.2 秒。当不设置值时，表示立即显示/隐藏元素

可选参数fn 为在动画完成时执行的函数

示例：使用 show() 方法与hide() 方法以动画的方式显示和隐藏图片

<script type="text/javascript">
  $(function(){
    $("#btn").click(function() {
	if($(this).val()==" 显示") {
	     $("#pic").show("slow",function() {
	     	$(this).css({"border":"1px solid red","padding":"5px"});
        	     });
             	     $(this).val("隐藏");
	} else {
	     $("#pic").hide("slow");
	     $(this).val("显示");	}});});
</script>

8.1.2 toggle()方法

toggle() 方法会动态地改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态

如果元素是可见的，则切换为隐藏状态；如果元素是隐藏的，则切换为可见状态

jQuery 对象.toggle(duration,[fn]);

示例：制作可伸缩的垂直菜单的操作

<style>
     //其他样式代码略
     ul li.down{
	background-image:url(../img/down.jpg);
     }
</style>

8.1.3 实践练习

8.2 淡入淡出动画效果

8.2.1 fadeIn() 方法与fadeOut() 方法

fadeIn() 方法可以动态地改变当前元素的透明度（其他不变），实现淡入的动画效果，最终显示当前元素

fadeOut() 方法可以动态地改变当前元素的透明度（其他不变），实现淡出的动画效果，最终隐藏当前元素

jQuery 对象.fadeIn(duration,[fn]); 

jQuery 对象.fadeOut(duration,[fn]);

示例：使用 fadeIn() 方法与fadeOut() 方法以淡入淡出的方式显示和隐藏图片

<script type="text/javascript">
  $(function(){
    $("#btn").click(function() {
	if($(this).val()==“淡入") {
	     $("#pic").fadeIn("slow",function() {
	     	$(this).css({"border":"1px solid red","padding":"5px"});
        	     });
             	     $(this).val(“淡入");
	} else {
	     $("#pic").fadeOut("slow");
	     $(this).val(“淡出");
    }
    });
  });
</script>

8.2.2 fadeToggle()方法

fadeToggle() 方法会动态地改变当前元素的透明度，最终切换当前元素的可见状态

如果元素是可见的，则通过淡出效果切换为隐藏状态；如果元素是隐藏的，则通过淡入效果切换为可见状态

jQuery 对象.fadeToggle(duration,[fn]);

示例：使用fadeToggle()方法实现后三项商品类型的动画效果在淡出和淡入之间切换

<style>
     //其他样式代码略
     ul li.down{
	background-image:url(../img/down.jpg);
     }
</style>
<script type="text/javascript">
    $(function(){
        $("#menu li.lastItem").click(function() {
	     // 切换菜单
	     $("#menu li:gt(5):not(:last)").fadeToggle();
	     // 更换底部箭头方向
	     $(this).toggleClass("down");
         });
    });
</script>

8.2.3 fadeTo() 方法

fadeTo() 方法可以改变元素的透明度到指定某一个值

jQuery 对象.fadeTo(duration,opacity,[fn]);

参数duration 为动画效果的速度，使用方式与hide()、show() 等方法一致

参数opacity 用于指定不透明值，取值范围是0 ～ 1（0 代表完全透明，1 代表完全不透明）

示例：使用fadeTo ()方法改变图片的透明度

<script type="text/javascript">
    $(function(){
        $("#sel").change(function() {
	     var opacity = $(this).val();
	     $("img").fadeTo(3000,opacity);
	});
      });
</script>

8.2.4 实践练习

8.3 滑入滑出动画效果

8.3.1 slideDown() 方法与 slideUp() 方法

slideDown() 方法会动态地改变当前元素的高度（其他不变），由上到下滑入，即高度向下增大，使其呈现出一种“滑动”的效果，直至最终显示当前元素

slideUp() 方法会动态地改变当前元素的高度（其他不变），由下到上滑出，即高度向上减小，直至最终隐藏当前元素

jQuery 对象.slideDown(duration,[fn]);

jQuery 对象.slideUp(duration,[fn]);

示例：制作图书销售网站中“我的书库”菜单的二级菜单滑入滑出的动画效果

<script type="text/javascript">
  $(function(){
       $(".secondLi").hover(function() {
         $(".secondLi ul").slideDown(2000);
     },function(){
         $(".secondLi ul").slideUp(2000);
     });
    });
</script>
html和css代码略

8.3.2 slideToggle()方法

slideToggle() 方法会动态地改变当前元素的高度（其他不变），最终切换当前元素的可见状态

如果元素是可见的，则通过滑出效果切换为隐藏状态；如果元素是隐藏的，则通过滑入效果切换为可见状态

jQuery 对象.slideToggle(duration,[fn]);

示例：使用slideToggle()方法实现二级菜单滑入滑出的动画效果

<script type="text/javascript">
  $(function(){
       $(".secondLi").click(function() {
         $(".secondLi ul").slideToggle(2000);
     });
    });
</script>
html和css代码略

8.3.3 实践练习

8.4 自定义动画

8.4.1 简单的动画

animate() 方法可以动态地改变当前元素的各种 CSS 属性

jQuery 对象.animate(properties,[duration],[fn]);

参数 properties 使用一个“名：值”形式的对象来设置需要改变的 CSS 属性。

animate() 方法只能改变可以取数字值的 CSS 属性，如宽高，边框粗细，内外边距，元素位置，字体大小，字体间距，背景定位和透明度。

示例：animate() 方法实现图片的放大显示

<script type="text/javascript">
   $(function() {
      $("img").click(function() {
        $(this).animate({width:"180px",height:"180px"},"slow");
      });
   });
</script>
<body>
     <img src="../img/tmac.jpg"/>
</body>

8.4.2 移动位置的动画

通过 animate() 方法，不仅可以利用动画效果增加元素的长度和宽度，还能够利用动画效果改变元素在页面中的位置

示例：使用 animate() 方法改变页面元素的位置

<script type="text/javascript">
   $(function() {
      $("img").click(function() {
	    //属性值前可以加上 "+=" 或 "-=" 运算符号，表示在原先属性值上累加或累减
         $(this).animate({left:"+=100px",top:"+=100px",opacity:0.5},3000);
      });
   });
</script>
<body>
     <img src="../img/tmac.jpg"/>
</body>

8.4.3 队列中的动画

所谓“队列”动画，是指在元素中执行一个以上的多个动画效果，即有多个 animate() 方法在元素中执行

根据这些 animate() 方法执行的先后顺序，形成了动画“队列”，产生“队列”后，动画的效果便按“队列”的顺序进行展示

示例：演示队列中动画的使用

<script type="text/javascript">
   $(function() {
      //<div> 元素点击事件
      $("div").click(function() {
        $(this).animate({height:100},"slow");  // 第 1 列
        $(this).animate({width:100},"slow");  // 第 2 列
          $(this).animate({height:50},"slow");   // 第 3 列
        $(this).animate({width:50},"slow");   // 第 4 列
   });
</script>
<body>
     <div> 队列中的动画 </div>
</body>

8.4.4 动画停止

stop() 方法能够结束当前的动画，并立即进入到下一个动画

jQuery 对象.stop([clearQueue],[gotoEnd]);

不带任何参数的 stop() 方法，则会立即停止当前正在执行的动画，如果后面还有动画要继续，则以当前状态开始接下来的动画

learQueue 参数表示是否清空未执行完的动画队列，gotoEnd 参数表示是否立即完成正在执行的动画

示例：避免当用户光标进入或移出的速度太快，导致移入移出与对应的动画不一致

<script type="text/javascript">
  $(function(){
       $(".secondLi").hover(function() {
         $(".secondLi ul").stop().slideDown(2000);
     },function(){
         $(".secondLi ul").stop().slideUp(2000);
     });
    });
</script>
html和css代码略

8.4.5 实践练习

总结：

• show()、hide()和toggle()方法使元素以动画效果实现显示和隐藏，改变元素的宽度、高度和透明度属性
• fadeIn()、fadeOut()、fadeToggle()和fadeTo()方法使元素以动画效果实现淡入和淡出的效果，改变元素的透明度
• slideUp()、slideDown()和slideToggle()方法使元素以“卷窗帘”的动画效果实现显示和隐藏，改变元素的高度属性
• 使用animate()方法自定义元素的动画效果，可以实现上述方法中全部属性改变的功能，同时，还可以使用动画的效果，改变其他的元素属性
• stop()方法能够结束当前的动画，并立即进入到下一个动画