jQuery实现基本淡入淡出效果的方法详解

本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考，具体如下：

jQuery fadeIn()方法：用于淡入已隐藏的元素

jQuery fadeOut()方法：用于淡出可见的元素

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
});
});
</script>
</head>
<body>
<p>演示带有不同参数的fadeIn()方法。</p>
<button>点击</button>
<br />
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
</body>
</html>

运行结果：

jQuery fadeToggle()方法：方法可以在fadeIn()与fadeOut()方法之间进行切换

语法：$(selector).fadeToggle(speed,callback);

如果元素已淡出，则fadeToggle()会向元素添加淡入效果

如果元素已淡入，则fadeToggle()会向元素添加淡出效果

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
});
});
</script>
</head>
<body>
<button>点击</button>
<br/>
<div id="div1" style="width:80px;height:80px;background-color:red;"</div>
</body>
</html>

运行结果：

jQuery fadeTo()方法：允许渐变为给定的不透明(值介于0与1之间)

语法：$(selector).fadeTo(speed,opacity,callback);

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo(1000,0.2);
});
});
</script>
</head>
<body>
<button>点击</button>
<br/>
<div id="div1" style="width:80px;height:80px;background-color:red;"</div>
</body>
</html>

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现的淡入淡出图片轮播效果示例

    jQuery实现的淡入淡出图片轮播效果示例

    本文实例讲述了jQuery实现的淡入淡出图片轮播效果.分享给大家供大家参考,具体如下: 1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致) css部分: <style> * { padding: 0; margin:0; } ul { list-style: none; } .out { width: 640px; height: 270px; margin:50px auto; position: relative; } .out img{ width: 640px; heig

  • 基于Jquery实现焦点图淡出淡入效果

    基于Jquery实现焦点图淡出淡入效果

    本文实例讲述了基于Jquery实现焦点图淡出淡入效果代码.分享给大家供大家参考.具体如下: 这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换间隔两个参数可以改. 运行效果截图如下: 具体代码如下: Html代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8">

  • 原生js和jQuery实现淡入淡出轮播效果

    本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l

  • jQuery实现图片文字淡入淡出效果

    jQuery实现图片文字淡入淡出效果

    本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.

  • jQuery实现的淡入淡出与滑入滑出效果示例

    jQuery实现的淡入淡出与滑入滑出效果示例

    本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery淡入淡出</title> <style> .d

  • Jquery 滑入滑出效果实现代码

    CSS 复制代码 代码如下: <style type="text/css"> #divD{ width:300px; height:100px; background-color:#CC99FF; } </style> Jquery代码 复制代码 代码如下: <script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"></script>

  • 基于jQuery实现淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

  • jQuery实现淡入淡出的模态框

    本文实例为大家总结了jQuery淡入淡出模态框的使用方法,供大家参考,具体内容如下 HTML代码如下:固定格式就省略了 <div class="theme-popover"> <div class="theme-poptit"> <a href="#" rel="external nofollow" class="close">×</a> <h3>

  • jQuery实现的卷帘门滑入滑出效果【案例】

    jQuery实现的卷帘门滑入滑出效果【案例】

    本文实例讲述了jQuery实现的卷帘门滑入滑出效果.分享给大家供大家参考,具体如下: 效果: 如果用JQ来做,其实非常简单,核心代码: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> //jq入口函数简写方法 /* $(function ( ) { })*/ //jq入口函数普通方式 $(document).ready(function

  • jQuery实现基本淡入淡出效果的方法详解

    jQuery实现基本淡入淡出效果的方法详解

    本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元素 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script

  • jQuery实现首页图片淡入淡出效果的方法

    jQuery实现首页图片淡入淡出效果的方法

    本文实例讲述了jQuery实现首页图片淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示: 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML: <div id="carousel"> <div id="ca

  • 为Jquery EasyUI 组件加上清除功能的方法(详解)

    为Jquery EasyUI 组件加上清除功能的方法(详解)

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • Jetpack Compose实现动画效果的方法详解

    Jetpack Compose实现动画效果的方法详解

    目录 概述 低级别动画API animate*AsState 使用Animatable实现颜色变化效果 使用updateTransition实现颜色和圆角动画 rememberInfiniteTransition TargetBasedAnimation 自定义动画 AnimationSpec Easing AnimationVector 高级动画 概述 compose 为支持动画提供了大量的 api,通过这些 api 我们可以轻松实现动画效果 ps:这些 api 的原理与 Flutter 很接

  • 微信小程序实现下拉刷新和上拉分页效果的方法详解

    目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2

  • Android Flutter实现GIF动画效果的方法详解

    Android Flutter实现GIF动画效果的方法详解

    目录 前言 交错动画机制 代码实现 Interval 介绍 总结 前言 我们之前介绍了不少有关动画的篇章.前面介绍的动画都是只有一个动画效果,那如果我们想对某个组件实现一组动效,比如下面的效果,该怎么办? staggered animation 这个时候我们需要用到组合动效, Flutter 提供了交错动画(Staggered Animation)的方式实现.对于多个 Anmation 对象,可以共用一个 AnimationController,然后在不同的时间段执行动画效果.这就有点像 GIF

  • jQuery实现基本动画效果的方法详解

    jQuery实现基本动画效果的方法详解

    本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画 语法: $(selector).animate({params},speed,callback); params:必须 定义形成动画的CSS属性 speed:可选  规定效果的时常:slow,fast或毫秒 callback:可选  动画完成后所执行的函数名称. jQuery animate()--操作多个属性 默认情况下,所有HTML元素的位置都是静态的,并且无法移动,

  • jQuery短信验证倒计时功能实现方法详解

    本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > &l

  • jQuery遍历DOM节点操作之filter()方法详解

    本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

  • jQuery实现基本隐藏与显示效果的方法详解

    jQuery实现基本隐藏与显示效果的方法详解

    本文实例讲述了jQuery实现基本隐藏与显示效果的方法.分享给大家供大家参考,具体如下: jQuery 隐藏/显示 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); eg1: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu

随机推荐