Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript/jquery，为什么fadein/fadeout不能工作？

问Javascript/jquery，为什么fadein/fadeout不能工作？
EN

Stack Overflow用户

提问于 2017-07-19 02:37:44

回答 2查看 132关注 0票数 1

我搜索和查看了很多帖子，看到了很多答案，没有运气地尝试过。

我让它使用jquery彩色动画，但之后我不得不链接另一个我想避免的库。

我尝试了CSS动画，这是我无法工作的，因为当我删除css类时，它就没有机会产生淡出效果。

只有fadein/fadeout效应才不会发生。背景色正确切换。

TL;DR:当访问者从顶部滚动X值时，我的顶部导航栏要从透明的背景转到白色的背景，然后当访问者接近页面顶部时返回透明，具有平滑的过渡效果。

$(document).ready(function(){

  $(document).scroll(function(){

    if ($(this).scrollTop() > 200) {

      if ($("#topnav").hasClass('transparent')){

        $("#topnav").removeClass('transparent');

        $("#topnav").addClass('black').fadeIn(1000);

      }

    } else if ($(this).scrollTop() < 200) {

      if ($('#topnav').hasClass('black')){

        $('#topnav').removeClass('black');

        $('#topnav').addClass('transparent').fadeIn(1000);

      }

    }
  });
});

为什么这个不起作用？

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-07-19 03:13:47

您可以简单地使用CSS设置背景色，并使用CSS转换来实现淡入/淡出效果。

.box {
    background-color: black;
    -webkit-transition: background-color 2s;
    transition: background-color 2s;
}

在Javascript中，您可以设置颜色：

if ($(this).scrollTop() > 200) {
    $("#topnav").css({"background-color", "yellow"});
}

票数 1

EN

Stack Overflow用户

发布于 2017-07-19 04:25:01

试试这个简单的例子

在CSS文件中，

.transparent-background {
  background-color: transparent;
  -webkit-transition: background-color 1000ms ease;
  -ms-transition: background-color 1000ms ease;
  transition: background-color 1000ms ease;
}

.black-background {
  background-color: black;
  -webkit-transition: background-color 1000ms ease;
  -ms-transition: background-color 1000ms ease;
  transition: background-color 1000ms ease;
}

在js文件中，只需在将透明背景类附加到topNav容器之前添加类即可。

$(document).ready(function(){
  $(document).scroll(function(){
     if ($(this).scrollTop() > 200) {
         $("#topnav").removeClass("transparent-background").addClass('black-
                background')      
     } else {
        $("#topnav").removeClass("black-
                background").addClass('transparent-background')
     } 
 });
});

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45188050

复制

相关文章

重复执行fadeOut和fadeIn出现透明的情况

上周在做一些动画效果切换的时候，发现多次点击切换的时候会有透明的问题。一开始一直找不到问题，后来发现是代码重复执行，使用stop()；函数可以解决此问题： obj.parent().parent().stop(true,true).fadeOut(600,function(){obj.parent().parent().remove();}); $(selector).stop(stopAll,goToEnd); 参数描述 stopAll 可选。规定是否停止被选元素的所有加入队列的动画。 g

NateHuang

2018/03/14

1.1K0

jquery特殊效果 - fadeIn\fadeOut\hide\show\slide

fadein fadeout hide slidetoggle toggle

那么下一步写click监听点击按钮，然后触发div使用fadeOut()方法，使得已存在的div消失，如下：

Devops海洋的渔夫

2019/05/30

2.5K0

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

jquery html javascript ajax 编程算法

在现在就业的过程中，会运用JQuery是你的加分项，那么什么是JQuery，嗯，jquery是JavaScript的函数库，是一种轻量级的JavaScript库，写得少，做的多，导致jQuery有很多技术人员在使用它做项目。

达达前端

2019/07/16

2.6K0

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

jQuery的简单使用

jquery 网站 html css 编程算法

jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例：

端碗吹水

2020/09/23

7K0

jQuery特效 | 导航底部横线跟随鼠标缓动

javascript jquery

HTML5学堂（码匠）：jQuery来实现如下特效 - 在导航底部存在一条横线，跟随着鼠标缓动到相应导航项底部。 2月初，接收到了公众号读者的效果需求，希望能够讲解这样一个实例：横排的导航，下边框是

HTML5学堂

2018/03/13

8.7K0

jQuery特效 | 导航底部横线跟随鼠标缓动

Web前端JQuery入门实战案例

快速的，轻量级的，功能丰富的 js 库。动画(animation)，ajax，DOM，更简单，容易使用的api。

达达前端

2019/07/03

4K0

jquery ide html go seo

jquery 语法是为HTML元素的选取编制的，可以对元素执行某些操作。基础语法就是：$(selector).action()

仇诺伊

2018/09/12

4.3K0

第86节：Java中的JQuery基础

jquery是一种快速，小巧，功能丰富的JavaScript库，可以让html文档遍历和操作，事件处理，动画和ajax更加容易使用的一种api，可以在多种浏览器中工作。

达达前端

2019/07/03

2.9K0

第86节：Java中的JQuery基础

Web前端基础（08）

###事件模拟模拟触发某个元素的某个事件格式: 元素对象.trigger(“事件名称”); $(“input”).trigger(“click”); ###鼠标移入移出事件合并 hover 将鼠标移入和移出两个事件合并到一起 //给元素添加鼠标移入移出合并事件 (“div”).hover(function(){ //鼠标移入时执行 (this).css(“color”,“red”); },function(){ //鼠标移出时执行隐藏元素对象.hide(时间,方法); 显示元素对象

海拥

2021/08/23

1.2K0

原生javascript实现图片轮播效果代码

javascript jquery

前几天用jquery做了一个JS的图片轮播效果，现在用原生的javascript代码实现同样的功能，当练习用吧，代码写得不是很满意。看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果，代码实在是优雅，相比较差别一下就凸显了，下次再把他代码的精髓偷过来，嘿嘿。【原理简述】 html和css跟JQuery实现图片轮播效果里面的一样，略去。主要是几个公共函数，渐显和渐失，用闭包实现。至于主体逻辑部分，非常一般。【程序源码】贴几个公共函数算了，fadeIn,渐显,fadeO

李海彬

2018/03/19

3.8K0

jQuery基础--动画操作

三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title>

eadela

2019/09/29

4.1K0

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

function time toggle

1.1.3. 案例1：测试两种方式的区别【个数+顺序】

天蝎座的程序媛

2022/11/18

2.4K0

第73天：jQuery基本动画总结

var btn = document.getElementById(“bt n”);

半指温柔乐

2018/09/11

3.2K0

jquery - 页面弹框 - 阻止事件冒泡示例

jquery css html

好了，下一步就是设置.pop_con隐藏，设置display:none，然后编写jquery，设置点击按钮#btn ，触发click()事件的时候，设置.pop_con使用fateIn()显示。

Devops海洋的渔夫

2019/05/30

3.3K0

jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示

jquery java html ajax

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)

Python攻城狮

2018/08/23

2.3K0

jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示

jQuery 教程：简单的遮罩弹窗效果

jquery 兼容性教程浏览器事件

遮罩弹出效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见，例如：QQ空间浏览相册等。这种效果的好处就是，可以让用户聚焦到弹出的菜单中。

Denis

2023/04/15

1.6K0

jQuery 效果 – 淡入淡出

jquery 编程算法

通过 jQuery，我们可以实现元素的淡入淡出效果。在jQuery中有四个方法，分别是fadeIn()，fadeOut()，fadeToggle()，fadeTo()，下面来分别介绍一个这四个方法的使用以及参数设置。

OECOM

2020/07/02

2.9K0

jQuery动画相关方法概况方法说明实例 hide()和show() 隐藏和显示 HTML 元素。 $("#hide").click(function(){

静默虚空

2018/01/05

2.8K0

3，最简单的树（不显示图标）

-----后台 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Text; public partial class _Default : System.Web.UI.Page { protected voi

py3study

2020/01/07

6960

jQuery学习笔记

jquery ajax 编程算法

jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档

Mirror王宇阳

2020/11/13

7.4K0

相似问题

jQuery滑块(fadeIn / fadeOut)不能正常工作

10

jquery fadein和fadeout不能正常工作

37

jQuery fadeIn/fadeOut函数不能正常工作

25

jquery fadein()可以工作，但是fadeout()不能

10

为什么这个jQuery不能工作？图像fadeIn和fadeOut

10

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例