语法:

$(selector).animate({params},speed,callback);

示例一、jquery_opacity_css透明

$(function () {
$('.container img').css('opacity', 0.8).hover(function () {
$(this).css('opacity', 1);
}, function () {
$(this).css('opacity', 0.8);
});
});

 下载附件


示例二、jquery_opacity_css透明_加上时间控制

$('.container img').css('opacity', 0.8).hover(function () {
$(this).animate({ opacity: 1 }, 1000);
}, function () {
$(this).animate({ opacity: 0.8 }, 1000);
});

下载附件

备注:

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。


示例三、使用jQuery 效果 - fadeTo() 方法
语法:
$(selector).fadeTo(speed,opacity,callback)

代码:

$(function () {
$('.container img').css('opacity', 0.8).hover(function () {
$(this).fadeTo(500, 0.8); ;
}, function () {
$(this).fadeTo(500, 1);
});
});

备注:

参数 描述
speed

可选。规定元素从当前透明度到指定透明度的速度。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback

可选。fadeTo 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

jquery_opacity_css透明的更多相关文章

  1. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  2. 使用CSS3的box-shadow实现双透明遮罩层对话框

    box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...

  3. MFC背景透明

    # 一: # typedef BOOL (WINAPI *lpfnSetLayeredWindowAttributes)(HWND hWnd, COLORREF crKey, BYTE bAlpha, ...

  4. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  5. android 设颜色透明值

    如:把    <color name="line_gray_tran">#8d8d8d</color> 要设70%的透明值 计算方法:255*0.75=19 ...

  6. 父容器利用opacity设置透明后,子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  7. openwrt下部署adbyby去广告大师 免luci 带自启动,自动开启透明代理

    最近朋友送了个360老路由器 C301,于是乎就掉进了智能路由器的坑, 玩智能路由器第一件事一定是去广告, 要么怎么对得起智能路由器- -! 路由器去广告当然首推广告屏蔽大师 www.adbyby.c ...

  8. VB6史无前例的子类化之透明按钮

    [原创文章,转发请保留版权信息] 作者:mezstd 文章地址:http://www.cnblogs.com/imez/p/3299728.html 效果图: 请原谅笔者无耻地称之为史无前例,至少在笔 ...

  9. 利用box-shadow实现伪边框透明到图片

    前阵子突然看到了一个效果,一张图片,有一个边框,但是边框可以透明到图片.直接上图 贴代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

随机推荐

  1. firedac数据集和字符串之间相互转换

    firedac数据集和字符串之间相互转换 /// <author>cxg 2018-12-20</author> unit DatasetString; interface u ...

  2. android iOS 编码问题害死人!

    android 与后端服务器进行通信时,默认使用的编码格式是asi. 而iOS与后端通信时,获取的数据到iOS端默认被utf-8进行编码.所以,我们常常出现android能够从服务器端获取到数据,但是 ...

  3. C#编程(四十五)----------格式字符串

    格式字符串 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) 案例: string str=string.Format("{0:C}",0.2); ...

  4. cocos2d-x CC_SYNTHESIZE_READONLY

    //定义一个只读属性Label,在类定义中可以使用this->getLabel来访问     CC_SYNTHESIZE_READONLY(cocos2d::CCLabelTTF*,_label ...

  5. 安装express并创建工程

    安装express npm install express-generator -g 使用命令创建express工程, express projectName 生成express相应的工程结构 bin ...

  6. jQuery - 同时添加click和dblclick事件

    添加事件的代码比较简单,有两种方法: $("abc").bind({"click":fn,"dblclick":fn}); $(" ...

  7. Lua date format

    网上有比较复杂的方法:Date Formatting Functions   写了一个非常简单的代码 1: function formatDate(seconds, dateformat) 2: -- ...

  8. Oracle行列转换小结

    目录结构如下:行转列列转行[一].行转列 1.1.初始测试数据 表结构:TEST_TB_GRADE Sql代码 create table TEST_TB_GRADE (   ID        NUM ...

  9. 最常使用Eclipse快捷键

    一:编辑 alt+/:智能感知: alt+shift+s:出现代码块: ctrl+1:quick fix,同时还有简单的重构功能: ctrl+e:快速转换编辑器 ,这组快捷键将帮助你在打开的编辑器之间 ...

  10. fn:replace()函数

    fn:replace()函数将字符串中所有指定的子串用另外的字符串替换. 语法 fn:replace()函数的语法如下: ${fn:replace(<原始字符串>, <被替换的字符串 ...