jQuery 之 [ 动画 ]
jQuery动画
- 分为预约义动画和自定义动画
预约义动画
- 显示和隐藏动画效果
- 滑动式动画效果
- 淡入和淡出动画效果
显示和隐藏
-
show( )方法css
- 表示显示动画效果“括号中填写动画执行的时间 - 毫秒”
-
hide( )方法jquery
- 表示隐藏动画效果“括号中填写动画执行的时间 - 毫秒”
-
toggle( )方法并发
- 表示显示和隐藏的动画效果“括号中填写动画执行的时间 - 毫秒”
<body>
<button id="b1">显示</button>
<button id="b2">隐藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
显示和隐藏动画效果
show( )方法 - 表示显示动画效果“括号中填写动画执行的时间 - 毫秒”
hide( )方法 - 表示隐藏动画效果“括号中填写动画执行的时间 - 毫秒”
*/
/* 定位显示和隐藏按钮位置 */
var $b1 = $( '#b1' );
var $b2 = $( '#b2' );
/* 定位执行动画元素的位置 */
var $d1 = $( '#d1' );
/* 为指定元素绑定事件 */
$b1.click( function () {
/* 为指定元素设置显示动画效果 */
$d1.show( 5000 );
} );
/* 为指定元素绑定事件 */
$b2.click( function () {
/* 为指定元素设置隐藏动画效果 */
$d1.hide( 5000 );
} );
/* 为指定按钮绑定事件 */
$b1.click( function () {
/* 为指定元素设置显示和隐藏的动画效果 */
$d1.toggle( 5000 );
} );
</script>
</body>
滑动式动画
-
slideDown( )方法ide
- 表示从上向下滑动“括号中填写动画执行时间 - 毫秒”
-
slideUp( )方法函数
- 表示从下向上滑动“括号中填写动画执行时间 - 毫秒”
-
slideToggle( )方法动画
- 表示滑动式动画效果“括号中填写动画执行时间 - 毫秒”
<body>
<button id="b1">显示</button>
<button id="b2">隐藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
滑动式动画
slideDown( )方法 - 表示从上向下滑动“括号中填写动画执行时间 - 毫秒”
slideUp( )方法 - 表示从下向上滑动“括号中填写动画执行时间 - 毫秒”
*/
/* 定位显示和隐藏按钮位置 */
var $b1 = $( '#b1' );
var $b2 = $( '#b2' );
/* 定位执行动画元素的位置 */
var $d1 = $( '#d1' );
/* 为指定元素绑定事件 */
$b1.click( function () {
/* 为指定元素设置从上向下滑动动画效果 */
$d1.slideDown( 5000 );
} );
/* 为指定元素绑定事件 */
$b2.click( function () {
/* 为指定元素设置从下向上滑动动画效果 */
$d1.slideUp( 5000 );
} );
/* 为指定按钮绑定事件 */
$b1.click( function () {
/* 为指定元素设置滑动式动画效果 */
$d1.slideToggle( 5000 );
} );
</script>
</body>
淡入和淡出
-
fadeIn( )方法code
- 表示淡入动画效果“括号中填写动画执行时间 - 毫秒”
-
fadeOut( )方法事件
- 表示淡出动画效果“括号中填写动画执行时间 - 毫秒”
-
fadeToggle( )方法ip
- 表示淡入和淡出的动画效果“括号中填写动画执行时间 - 毫秒”
<body>
<button id="b1">显示</button>
<button id="b2">隐藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
淡入和淡出动画效果
fadeIn( )方法 - 表示淡入动画效果“括号中填写动画执行时间 - 毫秒”
fadeOut( )方法 - 表示淡出动画效果“括号中填写动画执行时间 - 毫秒”
*/
/* 定位显示和隐藏按钮位置 */
var $b1 = $( '#b1' );
var $b2 = $( '#b2' );
/* 定位执行动画元素的位置 */
var $d1 = $( '#d1' );
/* 为指定元素绑定事件 */
$b1.click( function () {
/* 为指定元素设置淡入动画效果 */
$d1.fadeIn( 5000 );
} );
/* 为指定元素绑定事件 */
$b2.click( function () {
/* 为指定元素设置淡出动画效果 */
$d1.fadeOut( 5000 );
} );
/* 为指定按钮绑定事件 */
$b1.click( function () {
/* 为指定元素设置淡入和淡出的动画效果 */
$d1.fadeToggle( 5000 );
} );
</script>
</body>
自定义动画
animate（ ）方法
-
表示设置动画显示效果io
- 括号中填写
- 动画执行效果 - css样式“用大括号｛｝包裹”
- 动画执行时间 - 毫秒
- 动画返回函数
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
自定义动画
animate（ ）方法 - 表示设置动画显示效果
括号中填写：
* 动画执行效果 - css样式“用大括号｛｝包裹”
* 动画执行时间 - 毫秒
* 动画返回函数
*/
var $div = $( '#d1' );
$div.animate( {
top : '300px',
left : '300px'
}, 5000 );
</script>
</body>
动画的并发和排队
-
并发
- 表示同时执行设置的动画效果
-
排队
- 表示前一个设置的动画效果执行完毕 在执行下一个
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
动画的并发和排队
并发 - 表示同时执行设置的动画效果
排队 - 表示前一个设置的动画效果执行完毕 在执行下一个
*/
/* 并发执行动画效果 */
var $div = $( '#d1' );
$div.animate( {
top : '300px',
left : '300px'
}, 5000 );
/* 排队执行动画效果 */
$div.animate( {
top : '300px'
},3000 ).animate( {
left : '300px'
},3000 );
</script>
</body>
中止动画
stop( )方法
-
表示目标元素执行的动画效果中止
- 括号中填写两个参数 - 布尔值
- 一个true时 - 表示中止目标元素的全部动画效果
- 两个true时 - 表示中止目标元素的全部动画效果而且结束当前执行的动画
- 不填写时 - 表示中止目标元素当前正在执行的动画效果
<body>
<button id="ks">开始</button>
<button id="tz">中止</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
中止动画
stop( )方法 - 表示目标元素执行的动画效果中止
* 括号中填写两个参数 - 布尔值
* 一个true时 - 表示中止目标元素的全部动画效果
* 两个true时 - 表示中止目标元素的全部动画效果而且结束当前执行的动画
* 不填写时 - 表示中止目标元素当前正在执行的动画效果
*/
/* 定位开始按钮位置 */
var $ks = $( '#ks' );
/* 定位中止按钮位置 */
var $tz = $( '#tz' );
/* 定位绑定事件元素的位置 */
var $d1 = $( '#d1' );
/* 为指定元素绑定事件 */
$ks.click( function () {
/* 为指定元素设置动画效果 */
$d1.animate( {
left : '1000px'
}, 3000 ).animate( {
top : '1000px'
}, 3000 );
} );
/* 为指定元素绑定事件 */
$tz.click( function () {
/* 为指定元素设置动画中止效果 */
$d1.stop( true, true );
} );
</script>
</body>
延迟执行动画
delay( )方法
- 表示为指定元素设置的动画效果进行延迟执行“括号中填写动画延迟多少时间 - 毫秒”
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
延迟执行动画
delay( )方法 - 表示为指定元素设置的动画效果进行延迟执行
* 括号中填写延迟多少时间 - 毫秒
*/
$( '#d1' ).delay( 2000 ).animate( {
left : '1000px'
}, 5000 );
</script>
</body>
相关文章
- 1. 【jQuery】之动画
- 2. JQuery第五天之JQuery动画
- 3. Jquery 动画
- 4. jQuery---动画
- 5. JQuery动画
- 6. jquery动画
- 7. jQuery 动画
- 8. jQuery动画
- 9. JQuery animate动画
- 10. 24.jQuery动画
- 更多相关文章...
- • ionic 加载动画 - ionic 教程
- • jQuery Mobile 表单滑动条 - jQuery Mobile 教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • 算法总结-滑动窗口
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 【jQuery】之动画
- 2. JQuery第五天之JQuery动画
- 3. Jquery 动画
- 4. jQuery---动画
- 5. JQuery动画
- 6. jquery动画
- 7. jQuery 动画
- 8. jQuery动画
- 9. JQuery animate动画
- 10. 24.jQuery动画