一、基础特效

.hide():隐藏匹配的元素。
.show():显示匹配的元素。
.toggle():显示或隐藏匹配元素。

<button class="hide">hide</button>
<button class="show">show</button>
<button class="toggle">toggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>$('.hide').click(function(){// $('div').hide('normal');// $('div').hide('fast');//可以使字符，也可以是数字，动画的时间$('div').hide(1000,function(){console.log("隐藏完毕");});});$('.show').click(function(){// $('div').hide('normal');// $('div').hide('fast');$('div').show(1000,function(){console.log('显示完毕');});});var n = 0;$('.toggle').click(function(){ $('div').toggle(1000,function(){var reg = n++ % 2;if(reg == 0){console.log('隐藏完毕',n);}else{console.log("显示完毕",n);};});});
</script>

二、滑动特效

.slideDown():用滑动动画显示一个匹配元素。
.slideToggle():用滑动动画显示或隐藏一个匹配元素。
.slideUp():用滑动动画隐藏一个匹配元素。

<button class="slideUp">slideUp</button>
<button class="slideDown">slideDown</button>
<button class="slideToggle">slideToggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>$('.slideUp').click(function(){// $('div').hide('normal');// $('div').hide('fast');//可以使字符，也可以是数字，动画的时间$('div').slideUp(1000,function(){console.log("隐藏完毕");});});$('.slideDown').click(function(){// $('div').hide('normal');// $('div').hide('fast');$('div').slideDown(1000,function(){console.log('显示完毕');});});var n = 0;$('.slideToggle').click(function(){ $('div').slideToggle(1000,function(){var reg = n++ % 2;if(reg == 0){console.log('隐藏完毕',n);}else{console.log("显示完毕",n);};});});
</script>

三、渐变特效

.fadeIn():通过淡入的方式显示匹配元素。
.fadeOut():通过淡出的方式隐藏匹配元素。
.fadeTo():调整匹配元素的透明度。
.fadeToggle():通过匹配的元素的不透明度动画，来显示或隐藏它们。

<button class="fadeOut">fadeOut</button>
<button class="fadeIn">fadeIn</button>
<button class="fadeTo">fadeTo</button>
<button class="fadeToggle">fadeToggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>$('.fadeOut').click(function(){// $('div').hide('normal');// $('div').hide('fast');$('div').fadeOut(1000,function(){console.log("隐藏完毕");});});$('.fadeIn').click(function(){// $('div').hide('normal');// $('div').hide('fast');$('div').fadeIn(1000,function(){console.log('显示完毕');});});$('.fadeTo').click(function(){// $('div').hide('normal');// $('div').hide('fast');$('div').fadeTo('normal',0.5,function(){console.log('显示完毕');});});var n = 0;$('.fadeToggle').click(function(){ $('div').fadeToggle(1000,function(){var reg = n++ % 2;if(reg == 0){console.log('隐藏完毕',n);}else{console.log("显示完毕",n);};});});
</script>

三、自定义特效

.animate():根据一组 CSS 属性，执行自定义动画。
.delay():设置一个延时来推迟执行队列中后续的项。
.finish():停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
.stop():停止匹配元素当前正在运行的动画。

$('.animate').click(function(){ $('div').animate({width:500},4000).animate({height:500},'normal').delay(1000).animate({opacity:0.5},'normal')
});
$('div').click(function(){// $('div').stop();$('div').finish();
});

jQuery内置特效相关推荐

pr预设的卷及内核锐化是什么_PR内置特效合集
PR 内置特效一览表 1. 预置 A. 卷积内核:查找边缘.模糊.模糊更多.浅浮雕.浮雕. 锐化.锐化更多.锐化边缘.高斯模糊.高斯锐化 B. 斜角边:厚斜边.薄斜边 C. 旋转扭曲:旋转扭曲入.旋转 ...
jQuery内置动画和多库共存
<!-- 淡入淡出: 不断改变元素的透明度来实现的 1. fadeIn(): 带动画的显示 2. fadeOut(): 带动画隐藏 3. fadeToggle(): 带动画切换显示/隐藏 --& ...
删除内置不卡米教程_影视特效后期AE CC零基础入门到高级教程
当你想做个动画用什么软件?很多人想到了ppt,没错,简单ppt也可以完成,除此之外小动画更专业的就应该用After Effects软件,简称AE. 还有影视后期特效,片头片尾,年终会议视频,婚庆剪辑, ...
jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总
jQuery(六)插件.Validate验证提交表单.submitHandler.更改错误信息显示的位置.required.Validator.内置验证方式表.validate ()的可选项汇总文章 ...
jquery unbind 异步_jQuery中的内置方法：unbind()
unbind()方法是jQuery中的内置方法,用于删除任何选定的事件处理程序.此方法可用于删除特定的事件处理程序或停止特定的函数.它可以在任何使用事件对象的事件处理程序上工作. 如果没有提供参数,则 ...
动漫轮播html,带17种内置过渡动画的jquery轮播图插件
bsc-slider是一款带17种内置过渡动画的jquery轮播图插件.该jquery轮播图插件可以制作最基本的轮播图效果,并内置17种过渡动画效果,还可以自定义动画的easing效果. 使用方法在 ...
python len函数_Python 初学者必备的常用内置函数
Python 作为一门高级编程语言,为我们提供了许多方便易用的内置函数,节省了不少开发应用的时间.目前,Python 3.7 共有 69 个内置函数,一些是我们耳熟能详的函数,另一些却不是很常见,这里 ...
php日程提醒,window_Win10的日历应用中怎么新增日程安排及提醒?，Win10 内置“日历”应用 - phpStudy...
Win10的日历应用中怎么新增日程安排及提醒? Win10 内置"日历"应用,可以方便地向它里面添加日程安排项目.既可以直接在日历应用中点击添加,也可以让小娜通过语音或文字输入添加 ...
微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]
原文地址: http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...

jQuery内置特效

内置特效

一、基础特效

二、滑动特效

三、渐变特效

三、自定义特效

jQuery内置特效相关推荐

最新文章

热门文章