语法:

$(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. I/O会一直占用CPU吗?【转载】

    转自:https://www.zhihu.com/question/27734728 知乎上看到的一个提问,可以参考 如下图:(图片摘自网络) 在进行I/O操作的时候,是将任务交给DMA来处理,请求发 ...

  2. 【python】python读取文件报错UnicodeDecodeError: 'gbk' codec can't decode byte 0xac in position 2: illegal multibyte sequence

    python读取文件报错UnicodeDecodeError: 'gbk' codec can't decode byte 0xac in position 2: illegal multibyte ...

  3. Fiddler抓包12-AutoResponder返回本地数据(mock)

    前言 mock可以说是面试必问的话题的,我第一次接触mock的时候也是一脸懵逼.虽然fiddler工具用了很久,里面的打断点,设置自动返回数据功能都用过. mock说的通俗一点就是模拟返回数据,只是面 ...

  4. Cannot subclass final class class com.sun.proxy.$Proxy

    背景 这个错误是我在使用AOP动态切换数据库,实现数据库的读写分离的时候出现的问题,使用到的系统环境是: <spring.version>3.2.6.RELEASE</spring. ...

  5. WebView入门

    webview是Android展示网页信息的控件,本文就来简要讲解这个控件的用法.关于webview我找到了一些很不错的文章,我就直接贴上连接,自己就不重复造轮子了.本文仅写出我本人目前使用过的东西, ...

  6. 成功让Eclipse更新ADT的方法

    [本文转载自]http://blog.csdn.net/yihui8/article/details/8044426 原文:配置android开发环境eclipse获取ADT获取不到 https:// ...

  7. Mysql 的子查询

    子查询: 子查询:嵌套在其它查询中的查询语句.(又称为内部查询) 主查询:包含其它子查询的查询称为主查询.(又称外部查询) 非相关子查询: 在主查询中,子查询只需要执行一次,子查询结果不再变化,供主查 ...

  8. Chocolatey 简介(软件自动化管理工具)

    一.Chocolatey 管理Windows软件的明智方法 1.建立在技术的无人值守安装和PowerShell.建立在技术的无人值守安装和PowerShell. 2.轻松管理Windows软件的所有方 ...

  9. Benchmark简介

    一.Benchmark简介Benchmark是一个评价方式,在整个计算机领域有着长期的应用.正如维基百科上的解释“As computer architecture advanced, it becam ...

  10. c++流缓冲学习---rdbuf()

    我们使用STL编程的时候有时候会想到把一个流对象指向的内容用另一个流对象来输出,比如想把一个文件的内容输出到显示器上,我们可以用简单的两行代码就可以完成: ifstream infile(" ...