HTML学习笔记（9）-jQuery动画

最新推荐文章于 2022-09-07 09:43:46 发布

瓜波牛排

最新推荐文章于 2022-09-07 09:43:46 发布

阅读量316

点赞数

分类专栏： HTML学习笔记分享文章标签： jquery 动画效果

本文链接：https://blog.csdn.net/Amigo_1997/article/details/108160928

版权

HTML学习笔记分享专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery动画包括显示和隐藏、渐入渐出、飞入飞出、自定义动画等。

一、显示和隐藏HTML元素

使用show（）方法可以动画效果显示指定的HTML元素，只适用于jQuery隐藏的元素或在CSS中声明style=‘display：none’的元素，其语法如下：

.show( [duration] [, easing ] [, comlete] )

duraion是动画效果的运行时间，easing是不同动画点中动画速度的easing函数，complete是动画效果执行完后调用的函数.

例：使用show（）方法以动画形式显示HTML元素的实例

<html>
<head>
  <script src="jquery.js"></script>
</head>
<body>
  <button>显示图片</button>
  <img src="dog.jpg" weight=300 height=200 style="display: none">
  <script>
    $("button").click(function () {
       $("img").show("slow");
  });
  </script> 
</body>
</html>

点击按钮后

例：使用hide（）方法隐藏指定的HTML元素的实例

<html>
<head>
  <script src="jquery.js"></script>
</head>
<body>
  <button>显示图片（需单击）</button>
  &nbsp;
  <button>消失图片（需双击）</button>
  <img src="dog.jpg" weight=300 height=200 style="display: none">
  <script>
    $("button:first").click(function () {
       $("img").show("slow");
  });
    $("button:last").dblclick(function () {
       $("img").hide("slow");
  });
  </script> 
</body>
</html>

注明：toggle()方法是切换HTML的显示效果

二、淡入淡出效果

淡入通过fadeIn()，淡出通过fadeOut(), 转换通过fadeToggle(), 参数同show（）方法。

例：实现淡入效果

<html>
<head>
  <script src="jquery.js"></script>
</head>
<body>
  <button>显示图片（需单击）</button>
  &nbsp;
  <button>消失图片（需双击）</button>
  <img src="dog.jpg" weight=300 height=200 style="display: none">
  <script>
    $("button:first").click(function () {
       $("img").fadeIn(3000);
  });
    $("button:last").dblclick(function () {
       $("img").hide("slow", function(){alert("图片已消失！")});
  });
  </script> 
</body>
</html>

例：使用fadeto方法调节HTML元素的透明度

<html>
<head>
<script type="text/javascript" src="jquery.js"></script></head>
<body>
  <p>单击我，我会变透明。</p> 
  <p>原先字体：用于比较</p>
  <script>
    $("p:first").click(function () {
      $(this).fadeTo("slow", 0.4);
    });
  </script> 
</body>
</html>

效果：

单击第一段文字后

三、滑动效果

例：使用SlideDown() 方法以滑动效果显示HTML元素的实例

<html>
<head>
  <style>
    div { background:#de9a44; margin:3px; width:80px;
    height:40px; display:none; float:left; }
  </style>
  <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
  <p>单击我!</p>
  <div id='div1'></div>
  <div id='div2'></div>
  <div id='div3'></div>
  <script>
    $("p").click(function () {
        if ($("#div1").is(":hidden")) {
            $("#div1").slideDown(2000);
            $("#div2").slideDown(3000);
            $("#div3").slideDown(4000);
        } else {
            $("div").hide();
        }
    }); 
  </script> 
</body>
</html>

注明：这里涉及id选择的知识，在jquery中，定义的时候用id=“div1”，使用的时候用#div1。

以上代码也可以用slideToggle实现切换

效果：

单击后然后

四、实现自定义的动画

$(selector).animate( properties [, duration] [,easing] [,complete] )

properties:产生动画效果的CSS属性和值

例：通过animate()方法实现自定义动画的实例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $("#btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $("#btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#0000ff;height:100px;width:100px;margin:6px;">
</div>
<button id="btn1">变长</button>
<button id="btn2">恢复</button>
</body>
</html>

注明：jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

五、动画队列

jQuery可以定义一组动画动作，并把它们放在队列（queue）中顺序执行。队列是一种先进先出原则的数据结构（线性表），它只允许在表的前端进行删除操作，在表的后端进行插入操作。

1. queue()方法

例：使用queue方法可以管理制定动画队列中要执行的函数

<html>
<head>  
  <script type="text/javascript" src="jquery.js"></script>
  <script>
	function runIt() {  
		var div = $("div");
		div.animate({height:300},"slow");
		div.animate({width:300},"slow");
		div.animate({height:100},"slow");
		div.animate({width:100},"slow");
	}
	
	$(document).ready(function(){
		$("button").click(function(){
			runIt();
			$("span").text($("div").queue("fx").length);   
		});
	});
  </script>
</head>

<body>
<button>开始演示动画</button>
<p>队列长度为: <span></span></p>
<div style="width:50px height:50px position:absolute background-color:red;"></div>
</body>
</html>

注：fx是默认的jQuery队列，span是用来组合文档中的行内元素

效果：

点击后（一连串动作）

例：使用dequeue()方法执行下一个函数，同时将其出队

<!DOCTYPE html>  
<html>  
<head>  
<style>  
    #count { margin:3px; width:40px; height:40px;       
	      position:absolute; left:0px; top:60px;        
		  background:green; display:none;
   }  
</style>  
<script src=" jquery.js"></script>  
<script type="text/javascript">  
$(function() {  
    var div = $('#count');  
    var list = [  
        function() {div.show("slow"); get();},  
        function() {div.animate({left:'+=200'},2000); get();},  
        function() {div.slideToggle(1000); get();},  
        function() {div.slideToggle("fast");get();},  
        function() {div.div.hide("slow"); get();},  
        function() {div.show(1200); get();},  
        function() {div.slideUp("normal"); get();}  
    ];  
    div.queue('testList', list); 
    var get = function() {  
        div.dequeue('testList');  
    }  
    $('#btn').bind('click', function() {  
          div.dequeue('testList');     
    });  
});  
</script>  
</head>  
<body>  
<div id="count"></div>  
<input id="btn" type="button" value="开始" />  
</body>  
</html>

动画队列有函数数组list组成，每个动画函数后，调用div.dequeue("testList")方法从而执行动画队列中下一个动画函数（同时会将此动画函数出队）。