jQuery动画效果animate()

最新推荐文章于 2024-08-02 10:25:30 发布

张小七七

最新推荐文章于 2024-08-02 10:25:30 发布

阅读量184

点赞数

分类专栏：前端文章标签： jquery html js javascript css

本文链接：https://blog.csdn.net/m0_37594616/article/details/103611170

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

查询某些资料的时候，无意中发现一篇文章的一个动画效果，看了一下源码，甚是有趣，自己写了两个简单的动画效果

一：先简单说一下语法：

(selector).animate({styles},speed,easing,callback)

参数：

styles

必需。规定产生动画效果的一个或多个 CSS 属性/值。

speed

可选。规定动画的速度。单位：毫秒。数值或"slow"或"fast"

easing

可选。规定在动画的不同点中元素的速度。默认值是 “swing”

callback

可选。animate 函数执行完之后，要执行的函数。

二：demo

<!DOCTYPE html>
<html>
<head>
	<title>自定义动画</title>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var i=0;
			/* 案例一 飞呀飞*/
			$("body").bind("click",function(e){
				i++;
				console.log(e.pageX+";"+e.pageY);
				$("body").html('<div  id="div_'+i+'" style="width:100px;height:50px;">︿(￣︶￣)︿</div>');
				$("#div_"+i).css({"position":"absolute","top":e.pageY+"px","left":e.pageX+"px"});
				var top = e.pageY-50;
				top = top>0?top:0;
				var left = e.pageX+50;
				left = left>0?left:0;
				$("#div_"+i).animate({"top":top+"px","left":left+"px"},500,function(){
					 $("#div_"+i).remove();
				});
			});
			/* 案例二 花花*/
			$("body").bind("click",function(e){
				i++;
				console.log(e.pageX+";"+e.pageY);
				$("body").html('<div id="div_'+i+'" style="font-size:14px;">❀</div>');
				$("#div_"+i).css({"position":"absolute","top":e.pageY+"px","left":e.pageX+"px"});
				
				$("#div_"+i).animate({"font-size":"24px"},500,function(){
					   $("div_"+i).remove();
				});
			});
		})
	</script>
	<style type="text/css">
		html,body{height: 100%;text-align: center;}	

	</style>
</head>
<body>

</body>

</html>

张小七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画效果animate()

查询某些资料的时候，无意中发现一篇文章的一个动画效果，看了一下源码，甚是有趣，自己写了两个简单的动画效果一：先简单说一下语法：(selector).animate({styles},speed,easing,callback)参数：styles必需。规定产生动画效果的一个或多个 CSS 属性/值。speed可选。规定动画的速度。单位：毫秒。数值或"slow"或"fast"...
复制链接

扫一扫