摘要: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>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-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>

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>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-JQuery动画和停止动画实例代码

全部内容,希望文章能够帮你解决

js实例教程-JQuery动画和停止动画实例代码

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过