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

jQuery 停止动画

2016-07-15 13:52 609 查看

jQuery stop()方法

用于在动画或效果完成前对它们进行停止

eg:

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});

});

</script>

<style type="text/css">

#panel,#flip{

padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3;

}

#panel{

padding:50px;

display:none;

}

</style>

</head>

<body>

<button id="stop">停止</button>

<div id="flip">滑动</div>

<div id="panel">TianHongLing</div>

</body>

</html>

jQuery Callback函数

当动画100%完成后，即调用Callback函数

$(selector).hide(speed,callback)

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("I love you");
});
});

});

</script>

</head>

<body>

<button type="button">答案</button>

<p>Tian hong ling</p>

</body>

</html>

jQuery——Chaining

通过jQuery,可以把动作/方法链接起来
Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上).

eg：

<!DOCTYPE html>

<html>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});

});

</script>

</head>

<body>

<p id="p1">TianHongLing</p>

<button>click</button>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery

相关文章推荐

新的分享

章节导航