• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery淡入淡出元素让其效果更为生动

jQuery淡入淡出元素让其效果更为生动

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了淡入,淡出等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度。jQuery提供了3个和淡入淡出相关的函数:

·fadeIn()使得一个隐藏的元素淡入视野。首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走);然后,元素逐渐地变得可见。如果元素在页面上已经可见,则这个函数没有任何效果。如果没有提供一个速度值,元素使用“常规”设置来淡入(400毫秒)。

·fadeOut()通过使得一个可视的元素像幽灵般地淡出视线来隐藏它。如果元素在页面上已经隐藏,这个函数没有任何效果,这和fadeIn()函数一样。如果没有提供一个速度值,元素以400毫秒的速度淡出。

·fadeToggle()组合了淡入和淡出的效果。如果该元素当前是隐藏的,它会淡入视线中;如果它当前是可见 的,该元素会淡出视线。可以使用这个函数让一个提示框出现在页面上或从页面消失。例如,假设有一个按钮,其上显示单词“instructions”。当访 问者单击该按钮的时候,带有说明的一个div将淡入视线;再次单击该按钮,将会使说明淡出视线。要让该提示框每半秒钟淡入或淡出一次,可以这样编写代码:

$('#button').click(function(){
$('#instructions').fadeToggle(500);
});//end click

·fadeTo()的工作方式和其他两个效果函数略有不同。它把图像淡化到一定的透明度。例如,可以让图像淡化到半透明。和其他效果不同,必须提供一个速度值。此外,还提供0~1之间的一个值来表示元素的透明度。例如,要把所有的段落淡化到75%的透明度,可以这样编写代码:

$('p').fadeTo('normal',.75);

这个函数改变了一个元素的透明度,而不管这个元素是可见的还是不可见的。例如,假设要把当前隐藏的一个元素淡化到50%的透明度。然后,如果使用 show()或fadeIn()显示该元素,它会以50%的透明度显示。同样,如果隐藏一个半透明的元素,然后再显示它,它的透明度设置还是会恢复。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jquery实现提示语淡入效果
  • jQuery实现表格文本框淡入更改值后淡出效果
  • 基于jQuery实现淡入淡出效果轮播图
  • jQuery代码实现图片墙自动+手动淡入淡出切换效果
  • jquery淡入淡出效果简单实例
  • 原生js和jQuery实现淡入淡出轮播效果
  • jQuery实现图片文字淡入淡出效果
  • 基于Jquery实现焦点图淡出淡入效果
  • jquery动画效果学习笔记(8种效果)
  • jquery实现经典的淡入淡出选项卡效果代码

相关文章

  • jQuery简单tab切换效果实现方法
  • jquery创建表格(自动增加表格)代码分享
  • 使用jQuery制作浮动工具栏的实例分享
  • 3Z版基于jquery的图片复选框(asp.net+jquery)
  • 轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
  • jquery实现倒计时效果
  • jquery查找tr td 示例模拟
  • jquery实现简单的banner轮播效果【实例】
  • Jquery实现的角色左右选择特效

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于jquery实现表格内容筛选功能实例解析
    • JQuery 选项卡效果(JS与HTML的分离)
    • jQuery实现的简单折叠菜单(折叠面板)效果代码
    • jQuery.form插件的使用及跨域异步上传文件
    • jquery根据属性和index来查找属性值并操作
    • jQuery 入门级学习笔记及源码
    • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
    • jQuery的animate函数学习记录
    • jquery的Tooltip插件 qtip使用详细说明
    • JQuery validate 验证一个单独的表单元素实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有