zoukankan      html  css  js  c++  java
  • 淡入淡出效果 (jQuery)

    1jQuery中淡出动画fadeOut

    让元素在页面不可见,常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法,设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。

    fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果

    所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏。

    .fadeOut( [duration ], [ complete ] )

    通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400毫秒的延时

    2jQuery中淡入动画fadeIn

    fadeOut是淡出效果,相反的还有淡入效果fadeIn,方法使用上两者都是一致的,只是结果相反

    .fadeIn( [duration ], [ complete ] )
    • duration:指定过渡动画运行多长时间(毫秒数),默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
    • 元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。

    fadeIn()函数用于显示所有匹配的元素,并带有淡入的过渡动画效果。

    注意:

    • 淡入的动画原理:操作元素的不透明度从0%逐渐增加到100%
    • 如果元素本身是可见的,不对其作任何改变。如果元素是隐藏的,则使其可见

    3jQuery中淡入淡出切换fadeToggle

    fadeToggle()函数用于切换所有匹配的元素,并带有淡入/淡出的过渡动画效果。之前也学过toggle、slideToggle 也是类似的处理方式

    fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。

    常用语法:.fadeToggle( [duration ] ,[ complete ] )

    可选的 duration 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。

    fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

    4jQuery中淡入效果fadeTo

    淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但是他们都有个共同的特点,变化的区间要么是0,要么是1

    fadeIn:淡入效果,内容显示,opacity是0到1
    fadeOut:淡出效果,内容隐藏,opacity是1到0

    如果要让元素保持动画效果,执行opacity = 0.5的效果时,要如何处理?

    如果不考虑CSS3,我们用JS实现的话,基本就是通过定时器,在设定的时间内一点点的修改opacity的值,最终为0.5,原理虽说简单,但是总不如一键设置这么舒服,jQuery提供了fadeTo方法,可以让改变透明度一步到位

    语法

    .fadeTo( duration, opacity ,callback)

    必需的 duration参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。

  • 相关阅读:
    vue中的 computed 和 watch 的区别
    mysql8.0 初始化数据库及表名大小写问题
    sql server alwayson 调整数据文件路径
    zabbix 自定义监控 SQL Server
    mysql 创建用户及授权
    mysql 设置从库只读模式
    mysql8.0 主从复制安装及配置
    centos8.0安装mysql8.0
    centos8替换阿里数据源
    npm publish 报错 【you or one of your dependencies are requesting a package version that is forbidden by your security policy】
  • 原文地址:https://www.cnblogs.com/jiajia-16/p/6160865.html
Copyright © 2011-2022 走看看