JQuery动画和停止动画实例代码
JQuery动画和停止动画实例代码如下:
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>动画效果</title>
<%--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--%>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#begin").click(function () {
for (var i = 0; i < 5; i++) {
$("p").animate({
left: '250px',
opacity: '0.5',//透明度
height: '150px',
width: '150px'
}, 'slow');
$("#sec").show('slow');
$("p").animate({
left: '0px',
opacity: '1',
height: '100px',
width: '100px'
}, 'slow');
$("#sec").hide('slow');
}
});
//停止当前动画，跳入下一个动画
$("#stop").click(function () {
$("p").stop();
})
//停止所有动画，保持当前状态
$("#stop1").click(function () {
$("p").stop(true,false);
})
//停止所有动画，跳到当前动画终点
$("#stop2").click(function () {
$("p").stop(true, true);
})
/*
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
实例
*/
});
</script>
</head>
<body>
<button id="begin">开始动画</button> <button id="stop">停止当前动画，进入下一个动画</button>
<button id="stop1">瞬间停止</button><button id="stop2">停止所有动画，跳到当前动画终点</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<p style="background:#98bf21;height:100px;width:100px;position:absolute;">
<p id="sec" style="display:none;">第二次才显示</p>
</p>
</body>
</html>