<!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>
60、实例 使用jQuery实现自定义动画效果
最新推荐文章于 2022-09-23 17:23:20 发布