开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

fadeOut()不工作。淡出后，div再次出现

fadeOut() 是 jQuery 中的一个方法，用于使元素逐渐消失（淡出）。如果 fadeOut() 不起作用，可能是由于以下几个原因：

jQuery 库未正确加载：确保在使用 fadeOut() 方法之前，页面已经正确加载了 jQuery 库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

选择器错误：确保你使用的选择器正确无误，能够选中你想要淡出的 div 元素。

// 确保元素ID正确
$('#myDiv').fadeOut();

脚本执行顺序：确保你的 JavaScript 代码在 DOM 元素加载完成后执行。可以将脚本放在文档底部，或者使用 $(document).ready()。

$(document).ready(function() {
    $('#myDiv').fadeOut();
});

CSS 样式问题：确保 div 元素不是通过 CSS 设置为 display: none;，因为这会导致 fadeOut() 方法无法正常工作。
JavaScript 错误：检查控制台是否有其他 JavaScript 错误，这些错误可能会阻止 fadeOut() 方法的执行。
淡出后再次出现：如果 div 在淡出后再次出现，可能是因为有其他脚本或事件在 fadeOut() 完成后将其显示出来。检查是否有其他脚本修改了该元素的显示状态。

$('#myDiv').fadeOut(function() {
    // 确保在此回调函数中没有代码将div显示出来
});

动画队列：如果多次调用 fadeOut()，可能会导致动画队列堆积。确保在调用新的 fadeOut() 之前完成之前的动画。

$('#myDiv').stop(true, true).fadeOut();

以下是一个完整的示例，展示了如何正确使用 fadeOut() 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FadeOut Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #myDiv {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>
    <button onclick="fadeOutDiv()">Fade Out</button>

    <script>
        function fadeOutDiv() {
            $('#myDiv').fadeOut();
        }
    </script>
</body>
</html>

如果问题仍然存在，请检查控制台是否有任何错误信息，并确保所有依赖项都已正确加载。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery学习笔记

-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的) callback:完成执行后调用的函数名称 --> 淡入淡出 fadeIn():淡入已隐藏的元素...-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的) callback:完成执行后调用的函数名称 --> fadeOut():淡出可见的元素...-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的) callback:完成执行后调用的函数名称 --> fadeToggle()：淡入/出...-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的) callback:完成执行后调用的函数名称 --> fadeTo()：允许渐变为给定的不透明度...-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的) opacity:设置给定的不透明度（0~1） callback:完成执行后调用的函数名称

7.4K3 0

jQuery

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。 jQuery 效果 - 淡入淡出通过 jQuery，您可以实现元素的淡入淡出效果。...jQuery fadeOut()方法用于淡出可见元素。 $(selector).fadeOut(speed,callback); 可选的 speed 参数规定效果的时长。...$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut...如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。...fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

4.3K3 0

jQuery 效果

：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ; 注意：动画或者效果一旦触发就会执行，如果多次触发...三、淡入淡出淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 语法规范如下: ? ? ? ?...代码演示淡入效果淡出效果淡入淡出切换 <button...$("button").eq(1).click(function() { // 淡出 fadeOut() $("div").fadeOut...思路分析: 1.鼠标经过某个小li 有两步操作： 2.当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入 3.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

6.4K3 0

jQuery 动画

() 淡入和淡出可见元素。...$("button").click(function(){ $("#div").fadeOut(3000); $(..."#div").fadeIn(3000); }); fadeToggle() 可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法...可选的 callback 参数是隐藏或显示完成后所执行的函数名称。范例代码如下代码的作用是：点击按钮后，触发元素的隐藏动作，速度为1000毫秒，动作结束后，弹出“已经隐藏”提示。...淡入 / 淡出（1）fadeIn() 和 fadeOut() 在 jQuery 中，可以使用 fadeIn() 和 fadeOut() 方法来淡入和淡出 HTML 元素。

2.8K8 0

终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation

" 7 leave-active-class="animated fadeOut" 8 leave-to-class="animated fadeOut" 9 v-on:before-enter...就是动画效果 21 */ 22 /*before-enter这些就是钩子函数，是滑动进入状态 23 mode="out-in"是设定动画是先入后出，还是先出后入 24 appear.../ 与 CSS 结合时使用 35 //动画进入时 36 enter: function (el, done) { 37 // ... 38 done() 39 }, 40 //动画进入后...: '淡出', 13 fadeOutDown: '向下淡出', 14 fadeOutDownBig: '向下快速淡出', 15 fadeOutLeft: '向左淡出', 16...fadeOutLeftBig: '向左快速淡出', 17 adeOutRight: '向右淡出', 18 fadeOutRightBig: '向右快速淡出', 19 fadeOutUp

1.2K1 0

jquery特殊效果 - fadeInfadeOuthideshowslide

; }); }); fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 切换元素的可见状态 slideDown...() 向下展开 slideUp() 向上卷起 slideToggle() 依次展开或卷起某个元素 fadeIn() 淡入 / fadeOut() 淡出 / fadeToggle() 切换淡入淡出编写一个按钮和...div来演示一下效果。...那么下一步写click监听点击按钮，然后触发div使用fadeOut()方法，使得已存在的div消失，如下： ? 下面再写另一个按钮，用来触发fadeIn()方法，如下： ? ?...hide() 隐藏元素 / show() 显示元素 / toggle() 切换元素的可见状态上面写了淡入淡出的效果，下面来写一下隐藏和显示元素的效果。

2.5K2 0

怎么设置jQuery中的事件和动画

淡入淡出(透明度) 2.3.1. fadeIn(time)：淡入(透明度减少) 2.3.2. fadeOut(time)：淡出(透明度增加...$("#xy").text(x+","+y); // }) //移出事件，直接对元素使用unbind 或 off 来移出指定的事件例如在某些情况下，按钮只能点击一次，点击一次后再点击就无效...点击按钮偶数次可以，奇数次则失效 // if(i%2==0){ // console.info("试试就试试"+i); // }else{ // //上面代码执行后...：fadeOut(time)：淡出(透明度增加) $("#fadeOut").click(function(){ $(".big").fadeOut(1000); })..." value="淡出" /> <div class="big" style

2.4K1 0

第73天：jQuery基本动画总结

important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !...这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组动画整体才执行一次...常见的淡入淡出动画正是这样的原理。 fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。....fadeOut( [duration ], [ complete ] ) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。...可选的 callback 参数是 fadeToggle完成后所执行的函数名称。 fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

3.2K1 0

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

： // 淡出显示div $("#showDiv").fadeIn("slow") 淡入淡出方式下实现隐藏 fadeOut([speed],[easing],[fn]) 实现代码： // 淡出隐藏...div $("#showDiv").fadeOut("fetch"); 淡入淡出方式下既显示又隐藏 fadeToggle([speed,[easing],[fn]]) 实现代码： // 淡入淡出显示和隐藏...$("#showDiv").slideUp("fetch"); // 淡出隐藏div // $("#showDiv").fadeOut...我们要实现的是，在一个简单的网页中，页面打开三秒后将广告图显示出来，显示五秒后再将广告隐藏，这里对广告图片显示和隐藏的操作，根据上面的讲解，现在实现图片的显示和隐藏应该是很容易的了，那么到底应该如何实现延时显示和隐藏呢...jQuery的入口函数中写入，页面加载完成3000毫秒，也就是三秒后调用显示图片的方法；页面加载完成8000毫秒，也就是八秒后调用隐藏图片的方法，中间空余的五秒为显示图片的时间。

6.4K2 0

Web前端基础（08）

鼠标移入时执行 (this).css(“color”,“red”); },function(){ //鼠标移出时执行隐藏元素对象.hide(时间,方法); 显示元素对象.show(时间,方法); 淡出...元素对象.fadeOut(时间,方法); 淡入元素对象.fadeIn(时间,方法); 上滑元素对象.slideUp(时间,方法); 下滑元素对象.slideDown(时间,方法); 自定义元素对象...if(left<=-400){ //让当前图的位置移动到最后面 left=1200; } //再把减少后的left值赋值给元素 $(this...input type="button" value="隐藏" /> $("input:eq(0)").click(function(){ //隐藏时间后面的参数是动画完成后执行的

1.2K1 0

jQuery Cheat—Sheet（jQuery学习笔记）

$("#div2").fadeIn("slow"); //慢速淡入已经隐藏的div2 $("#div3").fadeIn(3000); //3000ms后完全淡入隐藏的div3 });...jQuery fadeOut() jQuery fadeOut() 方法用于淡出可见元素。...下面的例子演示了带有不同参数的 fadeOut() 方法： $("button").click(function(){ $("#div1").fadeOut(); //淡出要隐藏的div1...$("#div2").fadeOut("fast"); //快速淡出要隐藏的div2 $("#div3").fadeOut(5000); //5000ms后完全淡出要隐藏的div3 })...fadeTo() 方法中必需的opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback参数是该函数完成后所执行的函数名称。

16.2K3 0

jQuery实现不同效果代码

效果 - 淡入淡出 jQuery 拥有下面四种 fade 方法： fadeIn() 用于淡入已隐藏的元素。...$(selector).fadeIn(speed,callback); fadeOut() 用于淡出可见元素。...fadeToggle() 在 fadeIn() 与 fadeOut() 方法之间进行切换。 fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）。...可选的 callback 参数是动画完成后所执行的函数名称。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！...下面的例子把元素移动到右边，然后增加文本的字号： $("button").click(function(){ var div=$("div"); div.animate({left:'100px

2.4K0 0

【jQuery案例】手风琴

案例包含小方块、大方块和滑动的效果，所以我们需要设置小方块的大小和变成大方块后的大小等。 2、为不同的方块设置不同的背景颜色。...利用选择器获取到页面中的小方块时，通过fadeIn()和fadeOut()方法控制方块的显示与隐藏。案例实现 HTML 页面结构主要使用div、ul、li标签。...3、找到小方块，实现淡出效果。 4、获取小方块的兄弟元素，类名为big的大方块，实现淡入效果。 5、清除当前元素的其他兄弟元素，大方块变小方块。 6、实现小方块淡入效果。...7、实现大方块淡出效果。...6、小方块淡入 var fade_square2=interim2.find(".small").stop().fadeIn(); // 7、兄弟节点，大方块淡出

1.9K2 0

JQuery笔记

可选的 callback 参数是隐藏或显示完成后所执行的函数名称 toggle(speed,callback) 切换 hide() 和 show() 方法淡入淡出 fadeIn(speed...,callback) 用于淡入已隐藏的元素 fadeOut(speed,callback) 方法用于淡出可见元素 fadeToggle() 方法可以在 fadeIn() 与 fadeOut(...它可以取以下值："slow"、"fast" 或毫秒 fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）可选的 callback 参数是该函数完成后所执行的函数名称...不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回 not() 方法返回不匹配标准的所有元素 AJAX load方法 load() 方法从服务器加载数据，并把返回的数据放入被选元素中语法...jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍然在工作

6.1K2 0

jQuery 效果

：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ; 注意：动画或者效果一旦触发就会执行，如果多次触发...").slideToggle(500); }); }); 1.3 淡入淡出淡入淡出动画，常见有四个方法：fadeIn...() / fadeOut() / fadeToggle() / fadeTo() ; 语法规范如下: 1....淡出效果语法规范 fadeOut([speed,[easing],[fn]]) 2. 淡出效果参数（1）参数都可以省略。...淡入淡出切换效果语法规范 fadeToggle([speed,[easing],[fn]]) 2. 淡入淡出切换效果参数（1）参数都可以省略。

4.7K3 0

jQuery 效果

最为常见的如下：显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown() / slideUp() / slideToggle() ; 淡入淡出...：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ; 注意：动画或者效果一旦触发就会执行，如果多次触发...1.3 淡入淡出淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 语法规范如下: ?...代码演示淡入效果淡出效果淡入淡出切换 <button...$("button").eq(1).click(function() { // 淡出 fadeOut() $("div").fadeOut

5.8K2 0

前端成神之路-01_jQuery

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本 1.2.2....jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。...1.5.3 淡入淡出淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 语法规范如下: ?...$("button").eq(1).click(function() { // 淡出 fadeOut() $("div").fadeOut...，大图片淡出 1.6.

12K1 0

jQuery中的一些事件以及动画

还有一种就是我们的jQuery中的加载方式$(function(){}) window.onload方式 window.onload：在整个月面中所有内容加载完成后，才会执行事件。...是展开的就从下往上收缩div，如果是收缩的，就从上往下展开淡入淡出(透明度) 淡入淡出同样有三种，fadeIn、fadeOut、fadeToggle.我们一样用三个按钮分别实现 <...click(function(){ $(".big").fadeIn(1000); }) 点击按钮div从透明逐渐显示 fadeOut(time)：淡出(透明度增加) $("#fadeOut")....click(function(){ $(".big").fadeOut(1000); }) 点击按钮div从显示，逐渐透明 fadeToggle(time)：切换 $("#fadeToggle

2.1K2 0

【一起来烧脑】读懂JQuery知识体系

ready(function(){ //这里是jQuery代码 }); $(function(){ // 这里是jQuery代码 }); $( function() {} ); DOM加载完成后才可以对...$("button").click(function(){ $("p").toggle(); }); $(selector).toggle(speed,callback); jQuery 淡入淡出...fadeIn() jQuery fadeIn()用于淡入已隐藏的元素 fadeOut() jQuery fadeOut() 方法用于淡出可见元素 fadeToggle() jQuery fadeToggle...div3").fadeIn(3000); }); $(selector).fadeOut(speed,callback) $("button").click(function(){ $("#div1...").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); $(selector).fadeToggle(speed

2.6K3 0

前端(四)-jQuery

(毫秒数) 慢慢显示和隐藏 toggle(毫秒数，函数) 在动画效果结束后执行函数参数：可以为任意毫秒数或，slow,normal,fast; 4.4.2 改变元素的透明度(淡入淡出) 方法说明...fadeIn() 立即淡入 fadeIn(毫秒数) 淡入 fadeln(毫秒数，函数) 在动画效果结束后执行函数 fadeOut() 立即淡出 fadeOut(毫秒数) 淡出 fadeOut(毫秒数，函数...();//立刻淡出 $("img:eq(1)").fadeOut(5000);//淡出 }); //通过改变元素的高度 $("#slidedownImg").click...op_prev"> javaScript $(function(){ //调用轮播函数 playBanner(); }); //自定义轮播图播放函数 function

8.5K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭