您的位置：首页 > Web前端 > JQuery

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

2014-07-10 16:40 911 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航