60、实例使用jQuery实现自定义动画效果

最新推荐文章于 2022-09-23 17:23:20 发布

xuxianmei

最新推荐文章于 2022-09-23 17:23:20 发布

阅读量941

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/tlxxm/article/details/37658869

版权

jQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用jQuery实现自定义动画效果</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script>
//可以给一个对象添加多个动画效果，可以放到队列当中去(默认就是)，有两种方法可以不回，一个是链接语法，一个单独的添加.
$(document).ready(function(e) {
    $(".toright").click(function(event)
	{
		$("div").animate(
		{			
			left:"+=100px"	
			
		},1500);
		
		});
	
	$(".toleft").click(function(event)
	{
		$("div").animate(
		{			
			left:"-100px"	
			
		},1500);
		
		});
	$(".stopanimate").click(function(event)
	{
		$("div").stop(true,false,true);
	});
	
	$(".closeanimate").click(function(event)
	{
		$.fx.off=true;
	});
	$(".openanimate").click(function(event)
	{
		$.fx.off=false;
	});	
});

</script>
</head>

<body>
<button class="toleft">向左定位到-100px</button>
<button class="toright">向右移动+=100px</button>

<button class="stopanimate">停止动画运行</button>
<button class="closeanimate">关闭动画效果</button>
<button class="openanimate">打开动画效果</button>
<br/>
<div style="position:absolute;border:solid 1px red;left:200px">
自定义动画
</div>
</body>
</html>

xuxianmei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
60、实例使用jQuery实现自定义动画效果

使用jQuery实现自定义动画效果//可以给一个对象添加多个动画效果，可以放到队列当中去(默认就是)，有两种方法可以不回，一个是链接语法，一个单独的添加.$(document).ready(function(e) { $(".toright").click(function(event) { $("div").animate( { left:"+=100px"
复制链接

扫一扫