语法:

$(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. OData查询ASP.NET Web API全攻略

    本篇使用ASP.NET Web API来体验OData各种query. 首先是本篇即将用到的Model.使用的OData版本是4.0. public class Customer { public i ...

  2. 在NDK C++线程中如何调用JAVA API

    from://http://www.eoeandroid.com/thread-150995-1-1.html 在NDK中创建的线程中, 只允许调用静态的Java API. 当在线程中调用env-&g ...

  3. sublime关闭自动打开上次的文件

    菜单:Preferences->settings-User 在配置中加入: "hot_exit": false, "remember_open_files" ...

  4. Unity Shader-渲染队列,ZTest,ZWrite,Early-Z

    在渲染阶段,引擎所做的工作是把所有场景中的对象按照一定的策略(顺序)进行渲染.最早的是画家算法,顾名思义,就是像画家画画一样,先画后面的物体,如果前面还有物体,那么就用前面的物体把物体覆盖掉,不过这种 ...

  5. List与Array之间互换

    1 数组转换为List 调用Arrays类的静态方法asList. asList public static <T> List<T> asList(T... a) Return ...

  6. javax.servlet不存在问题的解决

    产生这个问题的原因是这个包在WEB服务器里才有,J2SE中没有,应该在J2EE中才有.因此必须告诉编译器这个包的位置. 正确的解决方案如下: 1. 搜索servlet-api.jar. 这个包应该在T ...

  7. 解决org.apache.velocity.exception.ResourceNotFoundException: Unable to find resource

    spring中做成bean,可以使用property"resourceLoaderPath"指定工程中的路径 <bean id="velocityEngine&qu ...

  8. Java中使用正则表达式获取网页中所有图片的路径

    public static List<String> getImageSrc(String htmlCode) { List<String> imageSrcList = ne ...

  9. springboot redis多数据源设置

    遇到这样一个需求:运营人员在发布内容的时候可以选择性的发布到测试库.开发库和线上库. 项目使用的是spring boot集成redis,实现如下: 1. 引入依赖 <dependency> ...

  10. 使用DDMS中的内存监测工具Heap来优化内存

    最近在做一个照片墙的应用,涉及到很多知识,其中难点在于如何应对数量庞大的图片,这就涉及到内存管理的知识了.今天介绍的工具是DDMS中自带的Heap,它可以显示出当前引用占用的内存,剩余的内存等信息.下 ...