- 浏览: 26511 次
最新评论
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery 动画2
实例
jQuery fadeIn()
演示 jQuery fadeIn() 方法。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。
jQuery fadeTo()
演示 jQuery fadeTo() 方法。
jQuery Fading 方法
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
实例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法:
实例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
实例
jQuery fadeIn()
演示 jQuery fadeIn() 方法。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。
jQuery fadeTo()
演示 jQuery fadeTo() 方法。
jQuery Fading 方法
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
实例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法:
实例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
发表评论
-
JavaScript强化教程 —— 对象创建模式
2016-10-09 17:12 713本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 645本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 828本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 597本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 532本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1291本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1191本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 775本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 875本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1045本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 770本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 561本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1213本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1381本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1104本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 813本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 835本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 470本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 644本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二)——导航条
2016-08-08 16:22 549本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
"浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf" 本文简要介绍了目前流行的JavaScript库,并对其中较为流行的两个库jQuery和ExtJs进行了较详细的介绍和对比研究。本文首先简要介绍了JavaScript库的概念和特点,...
这个压缩包文件"网页模板——jQuery实现滚动到网站页面底部动画弹出对话框.zip"很可能是包含了一个示例或模板,用于教导开发者如何利用jQuery来创建这种动态效果。 首先,我们来详细解释一下这个功能的核心知识点:...
jQuery是由John Resig开发的开源JavaScript库,其主要目标是简化JavaScript的DOM操作,同时提供丰富的事件处理、动画效果和Ajax交互。jQuery的命名源自"JavaScript"和"Quirksmode"的组合,意在解决浏览器之间的兼容...
### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA(Rich Internet Applications)技术的普及,JavaScript作为一种前端开发的重要工具,逐渐占据了重要的地位。它不再仅仅是用于...
在本资源"网页模板——jquery左右滑动隐藏图片动画效果相当帅气.zip"中,包含了一个利用jQuery实现的动态图片展示方案。 jQuery是一个广泛使用的JavaScript库,它的目标是使JavaScript编程变得更简单、更易于理解和...
总的来说,这个“网页模板——jQuery实现点击按钮爆炸式弹出不同颗粒动画特效源码”是一个学习和实践JavaScript动画技术的好例子。通过研究这个源码,开发者不仅可以掌握jQuery的事件处理和动画制作,还能了解到如何...
本教程将探讨“网站导航特效(一)——jQuery”的主题,重点介绍如何利用jQuery库来创建引人注目的导航栏特效。 jQuery是一个广泛使用的JavaScript库,它简化了JavaScript编程,使开发者能够更高效地实现复杂的网页...
《众妙之门——JavaScript与jQuery技术精粹》出自世界知名Web设计网站Smashing Magazine,其中的文章是来自全球顶级设计师的精华总结。全书共分为两大部分,第一部分阐述JavaScript的实战经验,共7章,内容涉及...
jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。`jqueryPage.js` 是一个基于 jQuery 的分页插件,用于帮助开发者轻松实现网页的分页功能。 `jqueryPage.js` 插件的使用首先需要...
该压缩包文件“网页模板——jQuery实现按下键盘对应字母亮灯的字母墙动画效果源码.zip”提供了一个基于jQuery的互动网页模板,该模板能够实现一个有趣的字母墙动画效果。当用户在键盘上按下对应的字母时,字母墙上的...
总之,“网页模板——jQuery chili图片远处放大插件打包.zip”提供的是一种提升网页图片展示体验的解决方案,通过使用jQuery Chili插件和精心设计的JavaScript代码,使得用户能够便捷地查看和欣赏网页中的图片。...
在"ASP.NET源码——JQuery功能测试源码.zip"这个压缩包中,我们很可能会找到一些示例代码,用于展示如何在ASP.NET项目中集成和使用jQuery。 在ASP.NET项目中,jQuery主要被用来增强用户体验,通过AJAX技术实现页面...
首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。jQuery的动画功能尤其强大,通过简单的API,开发者可以轻松创建复杂的动画效果。 在这个生日蛋糕蜡烛动画特效中...
总结来说,"网页模板——jQuery实现的鼠标悬停图片震动特效源码"是一个基于jQuery的交互设计案例,通过`mouseenter`、`mouseleave`事件监听和`animate`方法实现动态效果,提供了一种提升用户体验的方式。理解并掌握...
总的来说,这个"网页模板——jQuery实现的去哪儿城市选择特效源码"是一个综合运用HTML、CSS和jQuery技术的示例,展示了如何利用这些工具创建具有交互性和动态性的网页组件。对于前端开发者来说,学习和理解这个源码...
《疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战》是一本深入浅出的前端开发教程,它涵盖了三个核心的前端技术:jQuery、AngularJS和Bootstrap。这些技术在现代网页开发中扮演着至关重要的角色,使得...
【标题】"PHP实例开发源码——jquery插件之wScratchPad.js.zip" 提供了一个实际的PHP项目,其中包含了一个基于jQuery的插件——wScratchPad.js。这个插件主要用于创建模拟刮刮卡效果,常用于网页互动设计、游戏或者...
jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。由于其易用性和丰富的插件生态系统,jQuery在Web开发中广泛使用。在构建动态和交互性强的树型结构时,jQuery提供了...
综上所述,"网页模板——jQuery遮罩点击图片弹出放大预览插件"是一个利用jQuery和CSS实现的交互功能,它通过遮罩层、弹出框和动态效果,提供了一种优雅的图片预览方式。在网页设计和开发中,掌握这种技术可以提升...