首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

05-老马jQuery教程-动画

easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear".可以可以进行扩展,比如参考文章:地址 返回值: jQuery包装对象。...这个动画效果只调整元素高度,可以使匹配元素以“滑动”方式隐藏起来。jQuery 1.3中,上下padding和margin也会有动画,效果更流畅。 参数跟show保持一致,不再赘述。...语法:fadeTo([[speed],opacity,[easing],[fn]]) 概述 把所有匹配元素不透明度以渐进方式调整到指定不透明度,并在动画完成可选地触发一个回调函数。...这个动画只调整元素不透明度,也就是说所有匹配元素高度和宽度不会发生变化。...把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕) 设置动画显示帧速 jQuery.fx.interval = 100; 对应视频地址:https://qtxh.ke.qq.com

2K00

jQuery里面的动画

显示完成可选地触发一个回调函数 slideUp([s,[e],[fn]]) 通过高度变化(向上减小)来动态地隐藏所有匹配元素,隐藏完成可选地触发一个回调函数 slideToggle([s],...function(){ console.log("动画完成"); }); }) 三、淡入淡出动画 方法 概述 fadeIn([s],[e],[fn]) 通过不透明度变化来实现所有匹配元素淡入效果...,并在动画完成可选地触发一个回调函数 fadeOut([s],[e],[fn]) 通过不透明度变化来实现所有匹配元素淡出效果,并在动画完成可选地触发一个回调函数 fadeTo([[s],o,[e...],[fn]]) 把所有匹配元素不透明度以渐进方式调整到指定不透明度,并在动画完成可选地触发一个回调函数 fadeToggle([s,[e],[fn]]) 通过不透明度变化来开关所有匹配元素淡入和淡出效果...stop([c],[j]) 停止所有指定元素上正在运行动画 delay(d,[q]) 设置一个延时来推迟执行队列中之后项目 finish([queue]) 停止当前正在运行动画,删除所有排队动画

1.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

第73天:jQuery基本动画总结

参数对应时间内,元素会发生显示/隐藏改变,改变过程中会把元素高、宽、不透明度进行一系列动画效果。....fadeOut( [duration ], [ complete ] ) 通过不透明度变化来实现所有匹配元素淡出效果,并在动画完成可选地触发一个回调函数。...注意: - 淡入动画原理:操作元素不透明度从0%逐渐增加到100% - 如果元素本身是可见,不对其作任何改变。...fadeTo() 方法中必需 opacity 参数将淡入淡出效果设置为给定不透明度(值介于 0 与 1 之间)。可选 callback 参数是该函数完成所执行函数名称。...例如: - 改变样式display为none - 设置位置高度为0 - 设置透明度为0 都能达到这个目的,并且针对这样处理jQuery都提供了各自方法。

3.2K10

05-老马jQuery教程-动画

easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear".可以可以进行扩展,比如参考文章:地址 返回值: jQuery包装对象。...这个动画效果只调整元素高度,可以使匹配元素以“滑动”方式隐藏起来。jQuery 1.3中,上下padding和margin也会有动画,效果更流畅。 参数跟show保持一致,不再赘述。...语法:fadeTo([[speed],opacity,[easing],[fn]]) 概述 把所有匹配元素不透明度以渐进方式调整到指定不透明度,并在动画完成可选地触发一个回调函数。...这个动画只调整元素不透明度,也就是说所有匹配元素高度和宽度不会发生变化。... 把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕) 设置动画显示帧速 jQuery.fx.interval = 100;

1.9K50

前端特效开发 | JS实现聚光灯看图效果

HTML5学堂(码匠):昏暗场景下,查看任何图片、效果都会给人不适感觉,所以人们往往喜欢明亮场景中来体验世界美好。...实现聚光灯效果,主要需要考虑两个方面,一个是鼠标移入时对选中图片进行高亮展示,同时对其它未选中设置前面对象中设置好明度值;另一方面需要考虑是当鼠标移开图片时,需要移除高亮显示,并且回归原来初始状态...img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项,并更改其中图像不透明度为我们Spotlight...}); // 获取其他列表项,并更改其中图像不透明度为我们Spotlight对象中设置一个 $(this).siblings('li').find...,只是为了用户查看一些相关内容时可以获得更好突出展示效果,这样可以进一步提升用户体验性。

4.3K50

JQuery动画

如$("element").hide(1000); show()和hide()方法执行过程中会同时增加/减少内容高度,宽度和不透明度,直到它们完全显示或消失。...fadeOut()方法指在指定一段时间内降低元素不透明度,直到元素完全消失。fadeIn()则刚好相反。...如以下代码: 其实这段代码本意是:点击a元素,让该元素3秒内先向距左200px,同时高度改为300px,不透明度变为1,然后完成上面的动作该元素又一个3秒内距上200px,高度变为300px...但是上面的代码并不能够达到预期值,实际上刚开始执行动画时候,css()方法就执行了,原因是css()方法并不会出现在动画队列中,而是立即执行,那么怎么改动代码才能实现预期效果呢?...PS:callback回调函数适用于jQuery所有的动画效果方法。

2.6K30

jquery nicescroll 配置参数

jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner...配置参数 当调用“niceScroll”你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变光标颜色,默认值是“#000000” cursoropacitymin - 改变不透明度非常光标处于非活动状态...(scrollabar“隐藏”状态),范围从1到0, 默认为0(隐藏) cursoropacitymax - 改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0,默...) sensitiverail,点击轨道上进行滚动(默认:true) enablemouselockapi,可以用鼠标说明锁API(对象拖动同样问题)(默认:true) cursorfixedheight...,用于光标像素设置固定高度(默认:false) hidecursordelay,设置微秒淡出滚动延迟时间(默认值:400) directionlockdeadzone,在对方向锁定激活像素死区

4.1K80

纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

Understanding Contrast 了解对比度 Material Design 中深色主题,基于下面的几个属性来进行定义: ・对比度:深色区域和100%纯白色正文文本对比度至少要达到15.8...设计时候可以通过有透明度白色叠加层来实现这种轻盈效果。 ? 元素越高,颜色相应就越浅、越明亮。 ? 通过表面的白色半透明层,控制透明度来让表面发生亮度变化。...可访问性强不饱和色彩 深色主题应该尽量避免使用高饱和度色彩,因为它们多数不能够达到 WCAG 对于文本对比度要求(4.5:1)。高饱和度色彩能够深色背景上产生炫光视觉效果,产生视觉疲劳。...这种报错基准色,是基于默认主题(浅色主题)下报错颜色 (#B00020),叠加了 40% 不透明度纯白图层之后所构成,它符合 AA 对比度标准。...深色背景上浅色文本 当浅色文本出现在深色背景上时候(这里是白色文本置于黑色背景之上),它应该遵循下面的不透明度设置规则: 最重要内容,白色文本不透明度设置为87% 中等重要内容,白色文本不透明度

9.5K10

jQuery中常用函数和属性详细解析

fadeIn( speed, [callback] ) 通过不透明度变化来实现所有匹配元素淡入效果,并在动画完成可选地触发一个回调函数。...这个动画只调整元素不透明度,也就是说所有匹配元素高度和宽度不会发生变化。...fadeOut( speed, [callback] ) 通过不透明度变化来实现所有匹配元素淡出效果,并在动画完成可选地触发一个回调函数。...fadeTo( speed, opacity, [callback] ) 把所有匹配元素不透明度以渐进方式调整到指定不透明度,并在动画完成可选地触发一个回调函数。...这个动画只调整元素不透明度,也就是说所有匹配元素高度和宽度不会发生变化。 stop( ) 停止所有匹配元素当前正在运行动画。如果有动画处于队列当中,他们就会立即开始。

2.5K10

jQuery弹出窗口插件colorbox

介绍 colorbox()函数使用一堆key/value对象和一个可选callback函数 格式:$(‘selector’).colorbox({key:value}, callback); 例子:...默认值 介绍 transition “elastic” 过渡效果,可以是”elastic”, “fade”, or “none”. speed 350 设置过渡效果持续时间,毫秒 href false...100 设置初始化高度 maxWidth false Example: “100%”, 500, “500px” 设置内容最大宽度 maxHeight false Example: “100%”,...pic=1这样连接被误认为是网页 opacity 0.85 遮罩层不透明度 从0-1之间取值 open false 如果为true,ColorBox会自动开启 preloading true 如果为True...“stop slideshow” 停止自动滑动按钮文本 current “{current} of {total}” 文本内容:现在正在显示元素序号 previous “previous” “上一个

5.4K41

基础篇章:关于 React Native 之 Touchable 系列组件讲解

当我们按下时候,封装视图不透明度会降低,同时会有一个底层颜色透过并被用户看到,使得视图变暗或变亮。...底层实现上,实际会创建一个新视图到视图层级中,如果使用方法不正确,有时候会导致一些不希望出现视觉效果出现。比如没有给视图backgroundColor显式声明一个不透颜色。...activeOpacity number 设置封装视图在被触摸操作激活时用多少不透明度显示(通常在0到1之间)。...activeOpacity number 设置按压效果时,视图明度 setOpacityTo(value) 这是一个设置不透明度方法 效果展示 TouchableNativeFeedback 注意...background 决定在触摸反馈时候显示什么类型背景。它接受一个有着type属性和一些基于type属性额外数据对象

1.5K90

jQuery动画】停止动画、淡入淡出、自定义动画

‍ 哈喽大家好,本次是jQuery案例练习系列第四期 ⭐本期是jQuery动画——停止动画、淡入淡出、自定义动画 系列专栏:前端案例练习 笔者还是前端菜鸟,还请大家多多指教呀~ 欢迎大佬指正...---- 文章目录 停止动画 动画队列 stop()方法 stop()方法常用方式 淡入淡出动画 淡入淡出方法 显示效果 HTML CSS jQuery 自定义动画 animate()语法 代码演示...实现效果 代码及思路 总结 ---- 停止动画 使用动画过程中,如果在同一个元素上调用一个以上动画方法,那么对这个元素来说,除了当前正在调用动画,其他动画将被放到效果队列中,这样就形成了动画队列...动画队列 动画队列中所有动画都是按照顺序执行,默认只有当前一个动画执行完毕,才会执行后面的动画。为此,jQuery提供了stop()方法用于停止动画效果。...fadeToggle([speed],[easing],[fn]) fadeIn()和fadeOut()两种效果之间切换 注意:fadeTo()方法参数opacity表示透明度数值,范围在0~1

2.4K20

jQuery学习笔记

选择器允许基于元素id、class、type、属性、属性值等选择方法来找到指定HTML元素 jQuery事件: |Event 函数 |绑定函数至 | |$(document...-- speed:规定了淡入淡出延迟时间可取(slow/fast/毫秒数;即:缓慢、快速、延迟) callback:完成执行调用函数名称 --> fadeTo():允许渐变为给定不透明度...(值介于 0 与 1 之间) 语法 :该方法严格说只是将原本100%透明隐藏给设置了不透明度来利用 $().fadeTo(speed,opacity,callback); <!...-- speed:规定了淡入淡出延迟时间可取(slow/fast/毫秒数;即:缓慢、快速、延迟) opacity:设置给定不透明度(0~1) callback:完成执行调用函数名称...// 支持队列组合动画动作 }) }) 停止动画或效果: 语法 $().stop(stopAll,goToEnd); <!

7.4K30

基础篇章:关于 React Native 之 Touchable 系列组件讲解

当我们按下时候,封装视图不透明度会降低,同时会有一个底层颜色透过并被用户看到,使得视图变暗或变亮。...底层实现上,实际会创建一个新视图到视图层级中,如果使用方法不正确,有时候会导致一些不希望出现视觉效果出现。比如没有给视图backgroundColor显式声明一个不透颜色。...activeOpacity number 设置封装视图在被触摸操作激活时用多少不透明度显示(通常在0到1之间)。...activeOpacity number 设置按压效果时,视图明度 setOpacityTo(value) 这是一个设置不透明度方法 效果展示 TouchableNativeFeedback 注意...background 决定在触摸反馈时候显示什么类型背景。它接受一个有着type属性和一些基于type属性额外数据对象

1.9K90

jQuery (二)

由于更新,live,bind,delegate,die,undelegate 全部废弃 注意,这一部分全部废弃 动画效果 动画效果实质上是通过定时修改css属性,达到动画效果 一个栗子 https:...如果没有参数,将会直接设置display值为none,如果有任意一个参数,将会设置高度和不透明度,将其变为0,并且display也将会变为none,确保不会影响页面的布局。...$('p').animate({ marginLeft: "+=.5in", // 增加段落缩进 opacity: '-=.1' // 同时减少不透明度 }) hide会保存当前属性值,然后将值变化到...()方法,隐藏图片,图片大小用线性动画 // 不透明度采用swing缓动函数 $('img').animate({ width: "hide", height: "hide", opacity:...{ // data将会是解析对象{x:1, y:2} }) jQuery.get jQuery.post jQuery.get('.

9.3K30

jQuery Cheat—Sheet(jQuery学习笔记)

jQuery对象选择符有三种:标签名、ID、类 可以单独使用,也可以与其他选择符组合使用 元素选择器 jQuery 元素选择器基于元素名选取元素。...fadeTo() 方法允许渐变为给定不透明度(值介于 0 与 1 之间)。...fadeTo() 方法中必需opacity 参数将淡入淡出效果设置为给定不透明度(值介于 0 与 1 之间)。 可选 callback参数是该函数完成所执行函数名称。...15%明度 $("#div2").fadeTo("fast",0.4); //快速褪色到40%明度 滑动效果 jQuery slideDown() jQuery slideDown()...,”slow”); //最后执行,宽度减少到100px,透明度80% //以从上到下顺序执行动画队列 }); ### 停止动画 jQuery stop() 方法用于停止动画或效果它们完成之前

16.2K30

QQ隐藏图原理与C#实现(含源文件)

QQ群聊背景色为白色,而打开图片背景色为黑色,如果能巧妙修改图片各个像素明度,就可以达到不同背景下显示出不同图片功能。...效果 点开前 点开 原理分析 我们已经知道是通过修改透明度来实现这个效果,现在只需要计算出透明度就行了。...透明度叠加算法 设有两张图A,B,AB上面,B不透明度为255(0表示全透明,255表示不透明),A不透明度为alpha,则实际看到像素值为 灰度图算法 设白图点(i,j)处像素值为G’,...所以对于白图,把它不透明度设置为255 - G,对于黑图,把它不透明度设置为G,就能做到白色背景下能看到白图,黑色背景下能看到黑图效果。...而本程序里显示最终效果是严格基于理想条件,所以不保证最终显示QQ里效果和程序里效果相同。

1.5K10
领券