语法:

$(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. .Net Discovery 系列之二--string从入门到精通(下)

    前两节我们介绍了string的两个基本特性,如果你觉得你已经比较全面的了解了string,那么就来看看这第3.4两节吧. 三.有趣的比较操作  在第一节与第二节中,我们分别介绍了字符串的恒定性与与驻留 ...

  2. 在ASP.NET MVC下有关上传图片脏数据的解决方案

    在"在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片"中,已经实现了在客户端和服务端限制图片大小和格式,以及在服务端裁剪图片.但还 ...

  3. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

  4. MyBatis-Generator最佳实践

    引用地址:http://arccode.net/2015/02/07/MyBatis-Generator%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/ 最近使用MyBati ...

  5. jquery.jCal.js显示日历插件

    描述:日历插件jCal用于需要输入日期的表单文本框. 兼容浏览器:IE浏览器/Firefox/Google Chrome 官方链接: http://www.overset.com/2008/05/1 ...

  6. python测试开发django-39.xadmin详情页面布局form_layout

    前言 xadmin的详情页面默认是一行展示一个字段,可以使用form_layout对详情页面的布局重新设计. 可以设置必填和非必填字段,也可以设置不显示,不可以编辑的字段. models模块 先在mo ...

  7. BadgeValueView

    BadgeValueView 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 中的 BadgeValueView // // ...

  8. libjpeg的问题

    游戏项目是基于cocos2d-x开发的,但线上发现一个bug就是玩家在设置完自定义头像后直接闪退.凡是在设置该玩家头像的地方,游戏就直接闪退.最终定位到的问题是图片数据源有问题,我的机器是win7,图 ...

  9. Android让手机主动亮屏的代码

    我们在做电子阅读器的时候可能会要求屏幕保持常亮,不希望它熄灭.它的原理也是利用系统服务,来操纵底层设备. 一.系统服务——PowerManager PowerManager.java就是管理我们电源方 ...

  10. 《Erlang程序设计(第2版)》

    <Erlang程序设计(第2版)> 基本信息 作者: (瑞典)Joe Armstrong 译者: 牛化成 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:9787115354 ...