首页
学习
活动
专区
圈层
工具
发布

jQuery框架实现元素显示及隐藏动画【附案例分析】

在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是“默认方式显示和隐藏”、“滑动方式显示和隐藏”、“淡入淡出显示和隐藏”。接下来我们就分别对这三种方法进行介绍。...,滑动方式和默认方式的不同之处其实就是显示和隐藏时的动画不一样罢了,下面我们就来介绍一下在滑动方式下进行元素的显示、隐藏、既显示又隐藏, 滑动方式下显示 slideDown([speed],[easing..."fetch") 淡入淡出方式下运行的效果如下: 以上就是利用jQuery框架对元素进行显示和隐藏的方法,下面是上面实例的完整实现代码: 四、案例:广告的自动显示和隐藏 既然现在我们已经知道了jQuery框架下是如何进行元素的显示和隐藏的,那么就应该将其应用到实际的案例中去,下面通过实现广告的自动显示和隐藏的案例,来对该技术进一步加强实践...jQuery的入口函数中写入,页面加载完成3000毫秒,也就是三秒后调用显示图片的方法;页面加载完成8000毫秒,也就是八秒后调用隐藏图片的方法,中间空余的五秒为显示图片的时间。

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

    前端开发JS——jQuery常用方法

    自定义事件对象,是jQuery模拟原生实现的 自定义事件可以传递参数 ---- jQuery基础(四)---动画篇 1、jQuery中元素的隐藏和显示之hide和show方法 (改变样式display...无参数 若元素隐藏,则会显示;若显示,则隐藏 $ele.toggle(options) 动画隐藏或显示会慢慢改变宽高,致使页面布局发生改变 options可以传递多个参数,可以字典的形式传递,具体属性及属性值可查阅官方文档...,如果为false则是隐藏 3、jQuery中下拉/上卷动画之slideDown和slideUp方法(改变元素的高度) 元素下拉显示方法slideDown()和上述的show()很相似;元素下拉显示方法...() 无参数 若元素隐藏,则会下拉;若显示,则上卷 $ele.fadeToggle (options) 动画淡入淡出会慢慢改变元素透明度opacity在01之间,致使页面布局发生改变...,隐藏从右到左) 设置位置高度 ======>slideToggle 纵向动作(显示从上往下,隐藏从下往上) 设置透明度 ======>fadeToggle

    6.9K20

    jQuery选择器、Dom操作、样式、事件处理

    ,它会被隐藏;如果隐藏的,它会显示出来 .fadeIn([speed], [callback]):通过淡入的方式显示匹配元素。....fadeToggle([speed], [callback]):淡入淡出的方式显示隐藏元素,隐藏显示元素 .fadeTo(speed, opacity,[callback]):通过匹配元素的不透明度做动画效果...,取值:'slow', 'normal', 'fast'或毫秒 callback:显示或隐藏后执行的函数 opacity:透明度(0~1) $('#btn-box1').on('click',function....html(string) 用于获取/修改匹配元素的innerHTML 无参数时,返回元素的innerHTML 有参数时,修改元素的innerHTML为参数值 .text(string) 用来得到匹配元素集合中每个元素的文本内容结合...无参数时,获取元素内部文本 有参数时,设置元素内部文本为参数值 获取内容: $(".box").html() //获取元素内部的html内容,类似于innerHTML $(".box").text

    3.2K30

    jq---方法总结

    前者是jQuery库的源代码版本,它带有注释信息,建议你在开发环境中使用该文件,以便于调试或阅读源代码。...后者是前者经过压缩处理后的版本,它去除了多余的注释、空白字符等信息,并缩短了变量的名称,以减小js文件的体积。建议你在生产环境中使用该文件,以便于用户浏览器能够更快地加载jQuery库。...,默认不带过渡动画效果 $("selector").show( 400 ); // 显示隐藏的元素,带有400毫秒的过渡动画效果 $("selector").show( "fast" ); // 显示隐藏的元素...,带有200毫秒的过渡动画效果 $("selector").show( "slow" ); // 显示隐藏的元素,带有600毫秒的过渡动画效果 $("selector").hide(); // 隐藏显示的元素...,其用法与show()相同 $("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏,隐藏就显示),其用法与show()类似 /* 下面的slide*、fade*系列方法与上面的

    4.3K20

    第73天:jQuery基本动画总结

    , }) }); 2、jQuery中显示元素的show方法 hide是让元素显示到隐藏,show则是相反,让元素从隐藏到显示 - show与hide方法是修改的display属性,通过是visibility...通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。 - 如果元素是最初显示,它会被隐藏 - 如果隐藏的,它会显示出来 display属性将被储存并且需要的时候可以恢复。...- 元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。 fadeIn()函数用于显示所有匹配的元素,并带有淡入的过渡动画效果。...:淡入效果,内容显示,opacity是0到1 fadeOut:淡出效果,内容隐藏,opacity是1到0 如果要让元素保持动画效果,执行opacity = 0.5的效果时,要如何处理?...,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置 - 如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置

    5.4K10

    前端基础:jQuery

    也都能做,但使用 jQuery 能大幅提高开发效率 jQuery Advantages 体积小,压缩后只有 100 KB 左右 强大的选择器 出色的 DOM 封装 可靠的事件处理机制 出色的浏览器兼容性...).text( str ); } ); 表单事件 当元素获得焦点时,会触发 focus 事件,失去焦点时,会触发 blur 事件。...{ alert('hello'); }) 绑定多个事件 $(".del").on('click mouseover', function() { alert('hello'); }) 元素的隐藏和显示...改变元素的宽和高(带动画效果) show(speed):显示 hide(speed):隐藏 toggle(speed) 等价于 show + hide:显示的隐藏,隐藏的显示 可选的 speed 参数规定隐藏...removeClass() 将元素的类样式移除 toggleClass() 样式的切换;有->无,无->有 div{ width: 100px;

    14.8K20

    WEB入门之十八 动画特效

    核心技能部分​ 8.1 显示/隐藏动画 在DOM中,可以通过样式属性display来控制元素的显示和隐藏,但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数,详见表8-1-1所示。...表8-1-1 显示/隐藏动画函数 函数 说明 show( ) 元素显示动画特效 hide( ) 元素隐藏动画特效 toggle( ) 元素显示/隐藏切换动画特效 既然是动画,那么就一定跟速度有关系,...所以这几个函数都有一个参数来设置动画的速度,该参数的取值有: Ø 无参数:元素将直接显示/隐藏,没有动画特效 Ø slow:慢速(在600ms内)显示/隐藏 Ø normal:正常速度(在400毫秒内)...下面我们通过动画函数回调来改造示例8.1,当图片隐藏时,按钮上的文字改为“显示”;当图片显示时,按钮上的文字改为“隐藏”。...这几个函数也提供了一个参数来设置动画的速度,该参数的取值有: 无参数:元素将直接显示/隐藏,没有动画特效 slow:慢速(在600ms内)滑动 normal:正常速度(在400毫秒内)滑动 fast

    1.9K10

    jQuery

    下载地址:https://jquery.com/ 推荐下载3.X版本。 点击后直接鼠标右键另存页面为…即可,最后将下载下来的文件引入项目中。...---- jQuery 效果 可在API文档中查询具体用法:https://jquery.cuishifeng.cn/ jQuery 封装了很多动画效果,例如: 1.显示隐藏效果 1.显示 //(1)...show([speed,[easing],[fn]]);//中括号表示可以省略此参数,无动画直接显示 2.隐藏 //(1)speed:字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值...//(3)fn:回调函数,在动画完成时执行的函数,每个元素执行一次 hide([speed,[easing],[fn]]);//中括号表示可以省略此参数,无动画直接显示 3.切换显示和隐藏 toggle...$(“ul”).empty(); 结果:清空ul里所有的li;.html(‘’’’);与其类似 ---- jQuery 尺寸、位置操作 jQuery 尺寸 参数为空时是取值,参数不为空是设置宽高;

    23.8K50
    领券