jQuery动画(5)

2023-06-09 04:12| 来源: 网络整理| 查看: 265

1.常用动画 1.1 元素显示隐藏

jQuery实现显示、隐藏： show()、hide()、toggle()方法

方法描述show([speed,[easing],[fn]])显示隐藏的匹配元素hide([speed,[easing],[fn]])隐藏显示的匹配元素toggle([speed],[easing],[fn])元素显示与隐藏切换

显示方法参数介绍：

参数描述speed表示动画速度，取值范围为预定义字符串（‘slow’,‘fast’,‘normal’）==>（慢，快，正常）或者表示动画时长毫秒数的数值（如1000表示1秒）easing用来指定切换效果，默认swing(在开头/结尾移动慢，在中间移动快),linear( 匀速移动)fn在动画完成时执行的函数，每个元素执行一次 show([speed,[easing],[fn]]) //传入时间参数： $('div').show(1000); //传入回调函数： $('div').show(1000,function(){ alert('动画执行完成')； })

使用toggle方法切换元素显示、隐藏状态：

在这里插入图片描述

在jQuery中toggle()的源代码：

toggle:function(state){ if(typeof state ==='boolean'){ return state ? this.show() :this.hide(); } return this.each(function(){ if(isHidden(this)){ jQuery(this).show(); }else { jQuery(this).hide(); } }); } //隐藏图形 $('#btnHide').click(function () { $('div').hide(); }); //显示图形 $('#btnShow').click(function () { $('div').show(1000, function () { $('div').css('border-radius', '50%'); }) }); //切换显示隐藏效果 $('#btnToggle').click(function () { $('div').toggle('slow', 'linear'); });

在这里插入图片描述

1.2 元素淡入淡出

jQuery实现淡入、淡出、动画形式改变透明度： fadeIn ()、fadeout()、fadeTo()、fadeToggle()

方法说明fadeIn([speed],[easing],[fn])淡入显示匹配元素fadeOut([speed],[easing],[fn])淡出隐藏匹配元素fadeTo([[speed],opacity,[easing],[fn]])以淡入淡出方式将匹配元素调整到指定的透明度fadeToggle([speed,[easing],[fn]])在fadeIn()和fadeOut()两种效果间的切换 //淡出 $(selector).fadeOut(1000); //淡出 $(selector).fadeIn(1000); //切换 $(selector).fadeToggel(1000); //淡到 $(selector).fadeTo(1000,05); div { width: 100px; height: 200px; border: 1px solid black; } div img { width: 100px; height: 200px; } div img:first-child { display: none; } $('input').click(function () { $('img:last').fadeOut('fast', function () { $('img:first').fadeIn('slow', function () { $('input').val('灯亮了') }) }); }); $('div').fadeTo('1200', '0.3', function () { console.log('透明度已调节') });

在这里插入图片描述

1.3 元素上滑下滑

jQuery实现滑入、滑出、动画形式改变透明度： slideDown ()、slideUp ()、slideToggle()

方法说明slideDown([speed],[easing],[fn])垂直滑动显示匹配元素（向下增大）slideUp([speed],[easing],[fn])垂直滑动显示匹配元素（向上向下）slideToggle([[speed],[easing],[fn]])在上滑和下滑两种效果间的切换 img { width: 200px; height: 360px; } .wrap { position: relative; width: 200px; height: 360px; } .wrap div { position: absolute; width: 130px; height: 228px; top: 63px; left: 34px; text-align: center; line-height: 150px; } .wrap div.img1 { z-index: 3; background: pink; } .wrap div.img2 { z-index: 2; background: lightgreen; } .wrap div.img3 { z-index: 1; background: plum; } 滑动有惊喜只要努力就能成功 $('input').click(function () { //为slideUp()方法传入第三个参数-回调函数 $('.wrap div:first').slideUp(1500, function () { //在slideUp上滑动画完成之后执行slideUp //传入函数体作为回调函数 $('.wrap div:eq(1)').slideUp(1000); }) });

在这里插入图片描述

注意：

fadeIn / fadeOut、slideDown / slideUp：未传入动画速度参数情况下，也有动画效果show / hide：在未传入动画速度参数时无动画效果 2.自定义动画

自定义动画： jQuery提供动画方法animate()，方便开发者设置动画效果

用途：方便开发者设置动画执行形式

语法：

$(selector).animate(styles, speed, callback);

参数： styles表示动画执行目标样式属性和值组合成的键值对，可以包含多个属性名和属性值，speed表示动画的执行时间，单位是毫秒，callback表示动画执行完成之后的回调函数

2.1 简单自定义动画

案例演示：

把li元素的margin-left属性在1秒的时间内由当前状态改变为15像素。

并在动画完成之后，把所有索引值为奇数的li标签的margin-top值在1.5秒内改变为25像素。

ul { width: 300px; height: 260px; background: deepskyblue; padding: 20px; border-radius: 30px; } ul li { list-style: none; float: left; } ul li img { width: 20px; height: 20px; } ul li img { width: 20px; height: 20px; } $('input').click(function () { $('ul li').animate({ marginLeft: '15px' }, 1000, function () { $('ul li:odd').animate({ marginTop: '25px' }, 1500, function () { $('ul li:even img').animate({ width: '45px', height: '45px' }, 1200, function () { $('ul li:even').animate({ marginTop: '60px' }, 1000); }) }) }) });

在这里插入图片描述

2.2 加入表达式的动画

animate()方法的第一个参数是动画的目标样式属性和值组合成的键值对，每一项的值可以是带运算符的表达式。如“+=100px”表示增大100px，“-=100px”表示减少100px。

$('input').click(function(){ $('div').animate({ height:'+=100px', width:'-=100px' }); }); div { width: 160px; height: 10px; padding: 20px; text-align: center; overflow: hidden; position: absolute; background: url("./flag.png") top center no-repeat; background-size: 200px 500px; } div span { margin-top: 50px; margin-left: -10px; line-height: 50px; display: inline-block; width: 20px; font-family: "KaiTi"; font-size: 40px; color: #FFF; } 青春有理想和梦想 $('input').click(function () { $('div').animate({ height: '+=470px', left: '+=150px', top: '+=50px' }, 1500, function () { $('div').animate({ height: '-=470px', left: '-=150px', top: '-=50px' }, 1000) }) })

在这里插入图片描述

3.停止动画 3.1 停止动画

动画队列：同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到效果队列中，这样就形成了动画队列。

停止动画：用于停止动画效果，通过此方法，可以让动画队列后面的动画提前执行。

使用方式：

$(selector).stop( stopAll , goToEnd );

参数： stopAll表示是否清除动画队列，默认是false；goToEnd表示是否立即完成当前的动画，默认是false。

停止动画的方法的使用方式：

$('div').stop(); //停止当前动画，继续下一个动画 $('div').stop(true);//清除div元素动画队列中的所有动画 $('div').stop(true,true);//停止当前动画，清除动画队列中的所有动画 $('div').stop(false,true);//停止当前动画，继续执行下一个动画停止停止所有停止但要完成完成当前并继续 '停止'停止当前动画，继续下一个动画。 '停止所有'按钮停止当前活动的动画，并清空动画队列。 '停止但要完成'完成当前动画，然后停止执行。 '完成当前并继续'完成当前动画，继续下一个动画。 animate //开始动画 $('div').animate({ fontSize: '3em' }, 5000); $('div').animate({ width: '+=100px' }, 5000); //停止 $('#stop1').click(function () { $('div').stop(); }); //停止所有 $('#stop2').click(function () { $('div').stop(true); }); //停止但要完成 $('#stop3').click(function () { $('div').stop(true, true); }); //完成当前并继续 $('#stop4').click(function () { $('div').stop(false, true); });

在这里插入图片描述

3.2 判断元素是否在动画状态

使用方式：

$(selector).is(':animated');

返回值：元素处于动画状态，返回值为true，否则返回值为false

$('input').click(function () { if (!$('div').is(':animated')) { $('div').animate({ marginLeft: "+=100px" }, 1000); } });

在这里插入图片描述

【本文地址】

jQuery动画(5)

jQuery动画(5)

今日新闻

推荐新闻