- 综合排序
- 最热优先
- 最新优先
- 来自专栏开发经验记录
重复执行fadeOut和fadeIn出现透明的情况
一开始一直找不到问题，后来发现是代码重复执行，使用stop()；函数可以解决此问题： obj.parent().parent().stop(true,true).fadeOut(600,function
1.2K90发布于 2018-03-14 - 来自专栏Devops专栏
jquery - 页面弹框 - 阻止事件冒泡示例
编写一个简单的页面弹框的示例，功能要求如下： 一个点击按钮，点击可以弹出一个弹框 弹框固定出现在页面的中间位置 需要写一个背景mask，用于遮掩背景，设置透明度0.3 点击弹框外的位置，弹框就可以消失不见，可以使用fadeOut 阻止.pop弹框的click()事件，直接return false，就可以避免点击弹框的时候执行$(document).click()里面的fadeOut()事件 ? 执行完毕了alert()的事件之后，就继续冒泡将click()方法至下而上得冒泡至$(document)，导致$(document)执行fadeOut()。 最后，编写弹框右上角的× 号，点击则隐藏弹框 因为现在点击弹框都不会隐藏，所以可以单独给#close写一个click()方法，设置触发fadeOut()事件。 ? 点击#close后，正常执行fadeOut()，并且在.pop处已经截断了事件冒泡，所以在#close的 click()最后不用写return false;。
4.1K10发布于 2019-05-30 - 来自专栏h5学习笔记
jQuery 效果
：show() / hide() / toggle() ; 划入画出：slideDown() / slideUp() / slideToggle() ; 淡入淡出：fadeIn() / fadeOut 三、 淡入淡出 淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 语法规范如下: ? ? ? ? fadeIn(1000); }) $("button").eq(1).click(function() { // 淡出 fadeOut () $("div").fadeOut(1000); }) $("button").eq(2).click(function siblings("li").stop().animate({ width: 69 }).find(".big").stop().fadeOut
8.7K30发布于 2020-10-09 - 来自专栏对角另一面
读Zepto源码之fx_methods模块
props 是过渡的属性， fx_fethods 主要实现 show 、 hide 和 fadeIn、 fadeOut 等动画，用到的过渡属性为 opecity 和 scale 。 .fadeOut() $.fn.fadeOut = function(speed, callback) { return hide(this, speed, null, callback) } 淡出 fadeOut 调用的是 hide 方法，只是不处理 scale 变形。 'fadeIn' : 'fadeOut' ](speed, callback) }) } 切换淡入淡出效果。 如果 display 为 node 时，调用 fadeIn 方法显示，否则调用 fadeOut 方法隐藏。
1K00发布于 2017-12-27 - 来自专栏静默虚空的博客
jQuery 动画
$("button").click(function(){ $("p").toggle(); }); fadeIn()和fadeOut $("button").click(function(){ $("#div").fadeOut(3000); $( "#div").fadeIn(3000); }); fadeToggle() 可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法 淡入 / 淡出 （1）fadeIn() 和 fadeOut() 在 jQuery 中，可以使用 fadeIn() 和 fadeOut() 方法来淡入和淡出 HTML 元素。 （2）fadeToggle() 在jQuery中，可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。
4.2K80发布于 2018-01-05 - 来自专栏OECOM
jQuery 效果 – 淡入淡出
在jQuery中有四个方法，分别是fadeIn()，fadeOut()，fadeToggle()，fadeTo()，下面来分别介绍一个这四个方法的使用以及参数设置。 jQuery fadeOut() 方法用于淡出可见元素。也就是说将display为显示的元素隐藏，显示过程为淡出效果。 调用方法为：$(selector).fadeOut(speed,callback); 参数说明：speed---淡入时间，单位为毫秒（可选）。 jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
4.1K20发布于 2020-07-02 - 来自专栏IMWeb前端团队
移动端重构实战系列4——进入离开动画
{ 0% { opacity: 0; } 100% { opacity: 1; } } .fade-out { -webkit-animation-name: fadeOut ; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity : 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } 当然为了扩展，mixin
80320发布于 2019-12-04 - 来自专栏终身学习者
在Vue中创建可重用的 Transition
<transition name="fade" enter-active-class="fadeIn" leave-active-class="<em>fadeOut</em> { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes <em>fadeOut</em> { from { opacity: 1; } to { opacity: 0; } } .<em>fadeOut</em> { animation-name: <em>fadeOut</em>; } " :tag="tag" enter-active-class="fadeIn" leave-active-class="<em>fadeOut</em> { from { opacity: 1; } to { opacity: 0; } } .<em>fadeOut</em> { animation-name: <em>fadeOut</em>; }
11.4K20发布于 2020-06-04 - 来自专栏佳爷的后花媛
jQuery
jQuery fadeOut()方法用于淡出可见元素。 $(selector).fadeOut(speed,callback); 可选的 speed 参数规定效果的时长。 $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut (3000); }); 演示 jQuery fadeOut() 方法。 jQuery fadeToggle()方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 演示 jQuery fadeToggle() 方法。
6K30发布于 2018-09-12 - 来自专栏腾讯IMWeb前端团队
移动端重构实战系列4——进入离开动画
{ 0% { opacity: 0; } 100% { opacity: 1; } } .fade-out { -webkit-animation-name: fadeOut ; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity : 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } 当然为了扩展，mixin
64410编辑于 2022-06-29 - 来自专栏html5期末大作业
情人节程序员用HTML网页表白【七夕活动邀请函手机动态模板】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
(); $(".img1_10").stop(true, true).fadeOut(); $(".img1_11").stop (true, true).fadeOut(); } if (swiper.activeIndex ! (); $(".img8_10").stop(true, true).css("opacity", 0).fadeOut(); (true, true).css("opacity", 0).fadeOut(); $(".img_hengxian2").stop(true, true).css ("opacity", 0).fadeOut(); $(".wenzi3").stop(true, true).css("opacity", 0).fadeOut(
88330编辑于 2022-08-20 - CSS部分 我们用 @keyframes 创建了两个动画，一个是爱心的跳动动画 beat，另一个是文字的淡化消失动画 fadeOut ) rotate(-45deg); } 50% { transform: scale(1.2) rotate(-45deg); } } @keyframes fadeOut 文字将在2秒后通过 fadeOut 动画逐渐消失。 2px 5px rgba(0, 0, 0, 0.2); display: none; opacity: 1; animation: fadeOut 2s forwards; } @keyframes fadeOut { 0% { opacity: 1;来自专栏你的Bug我做主
爱心
class="heart" onclick="showLove()">
60100编辑于 2025-03-27
jquery特殊效果 - fadeIn\fadeOut\hide\show\slide
; }); }); fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 切换元素的可见状态 slideDown () 向下展开 slideUp() 向上卷起 slideToggle() 依次展开或卷起某个元素 fadeIn() 淡入 / fadeOut() 淡出 / fadeToggle() 切换淡入淡出 编写一个按钮和 那么下一步写click监听点击按钮，然后触发div使用fadeOut()方法，使得已存在的div消失，如下： ? 下面再写另一个按钮，用来触发fadeIn()方法，如下： ? ?
移动端重构实战系列4——进入离开动画
{ 0% { opacity: 0; } 100% { opacity: 1; } } .fade-out { -webkit-animation-name: fadeOut ; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity : 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } 当然为了扩展，mixin
常见的网页加载进度条
$(function(){ setInterval(function(){ $(".loading").fadeOut function(){ if(document.readyState=="complete");{ $(".loading").fadeOut javascript"> $(".loading .pic").animate({width:"100%"},100,function(){ $(".loading").fadeOut img").size()*100)+"%"); if(num>=i){ $(".loading").fadeOut
3，最简单的树（不显示图标）
$("#treeDemodiv").fadeIn(300); } //隐藏div function closediv() { $("#zhezhao").fadeOut (300); $("#treeDemodiv").fadeOut(300); } function showIconForTree(treeId, treeNode) { margin:0px;"><img style="width:19px;;height:19px;z-index:100;cursor:pointer" onclick="$('#treeDemodiv').<em>fadeOut</em> (300);$('#zhezhao').<em>fadeOut</em>(300);" src="..
jQuery动画与特效--jQuery基础知识点(4)
动画改变元素属性情况 show()和hide() 元素以动画效果实现显示与隐藏，可以同时改变元素的多个属性，如宽度、高度、透明度 fadeIn()和fadeOut() 元素以动画的效果淡入淡出，仅改变元素的透明度 ; $("页面元素").animate({height:"hide",width:"hide",opacity:"hide"},600); (2) animate()方法代替fadeOut ()方法 $("页面元素").fadeOut(600); $("页面元素").animate({opacity:"hide"},600); (3) animate
Apriso Modern UI样式系列之三 最强最实用组件Autocomplete
red'}); $('.fc_AutocompleteSelectedCallback span').show(); $('.fc_AutocompleteSelectedCallback span').fadeOut }); $('.fc_AutocompleteRefreshedCallback span').show(); $('.fc_AutocompleteRefreshedCallback span').fadeOut red'}); $('.fc_AutocompleteSelectedCallback span').show(); $('.fc_AutocompleteSelectedCallback span').fadeOut }); $('.fc_AutocompleteRefreshedCallback span').show(); $('.fc_AutocompleteRefreshedCallback span').fadeOut
【一起来烧脑】读懂JQuery知识体系
.toggle(); }); $(selector).toggle(speed,callback); jQuery 淡入淡出 fadeIn() jQuery fadeIn()用于淡入已隐藏的元素 fadeOut () jQuery fadeOut() 方法用于淡出可见元素 fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换 (){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); $(selector).fadeOut (speed,callback) $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); $(selector).fadeToggle(speed,callback); $("button").click(function
【jQuery案例】手风琴
244227 哈喽大家好，本次案例将会实现一个简单的手风琴效果，当鼠标指针滑过方块时，当前方块状态会发生变化 手风琴案例 案例分析 手风琴效果的实现并不复杂，需要用到jQuery中的fadeIn()和fadeOut 利用选择器获取到页面中的小方块时，通过fadeIn()和fadeOut()方法控制方块的显示与隐藏。 案例实现 HTML 页面结构主要使用div、ul、li标签。 }); // 3、找到小方块，实现淡出效果 var fade_square1= interim.find(".small").stop().fadeOut small").stop().fadeIn(); // 7、兄弟节点，大方块淡出 fade_square2.siblings(".big").stop().fadeOut width:69 }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号