首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

setInterval淡入淡出纯javascript没有jquery或css

setInterval是JavaScript中的一个函数,用于按照指定的时间间隔重复执行指定的代码或函数。它可以用于实现淡入淡出效果,即逐渐改变元素的透明度来实现平滑的显示或隐藏效果。

在淡入淡出效果中,我们可以通过改变元素的透明度来实现元素的渐显和渐隐。下面是一个使用setInterval函数实现淡入淡出效果的示例代码:

代码语言:javascript
复制
// 获取需要进行淡入淡出效果的元素
var element = document.getElementById("myElement");

// 设置初始透明度为0
element.style.opacity = 0;

// 定义淡入淡出效果的时间间隔和步长
var intervalTime = 10; // 时间间隔,单位为毫秒
var step = 0.01; // 步长,每次透明度变化的大小

// 定义淡入淡出效果的函数
function fadeEffect() {
  var currentOpacity = parseFloat(element.style.opacity);
  
  // 判断当前透明度是否已经达到目标值
  if (currentOpacity >= 1) {
    clearInterval(fadeInterval);
  } else {
    // 透明度逐渐增加或减少
    element.style.opacity = currentOpacity + step;
  }
}

// 使用setInterval函数重复执行淡入淡出效果的函数
var fadeInterval = setInterval(fadeEffect, intervalTime);

在上述代码中,我们首先获取需要进行淡入淡出效果的元素,并将其初始透明度设置为0。然后,我们定义了一个淡入淡出效果的函数fadeEffect,该函数通过逐渐增加元素的透明度来实现淡入效果。在函数中,我们首先获取当前的透明度,然后判断是否已经达到目标值(这里设定为1)。如果透明度未达到目标值,则将透明度逐渐增加,并更新元素的样式。最后,我们使用setInterval函数每隔一定的时间间隔调用一次淡入淡出效果的函数,从而实现了淡入淡出的效果。

这是一个纯JavaScript实现的淡入淡出效果的示例,没有使用jQuery或CSS。如果你想了解更多关于JavaScript的知识,可以参考腾讯云的JavaScript开发文档:JavaScript开发 | 腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

图片轮播(淡入淡出)--JS原生和jQuery实现

图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成...要注意的是,imgList中图片的宽度和高度最后马上设定,如果在css中才统一设定会变慢一些。...我给三个部分的active都添加的对应的on类,实际使用的时候可能不需要那么多active 接下来给它设置一下css样式 body,div,ul,...一、jQuery方式   demo 1.有一个当前图片对应的标号 curIndex = 0; 2.默认会自动轮播,所以默认给其添加 var autoChange = setInterval(function.../js/jquery.min.js"> 53 54 var curIndex = 0; //当前index

24K10

前端成神之路-01_jQuery

jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1 JavaScript 库 ​ JavaScript库:即 library...常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等,这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript...是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。...因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...停止动画排队的方法为:stop() ; stop() 方法用于停止动画效果。 stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。 ​

12K10

CSS vs JS动画:谁更快?

这篇文章会一步步告诉你为什么基于 Javascript 的 DOM 动画库(比如 Velocity.js 和 GSAP)能够比 jQuery 和基于 CSS 的动画库更高效。...jQuery 让我们从基本开始说起: JavascriptjQuery 两者不能混为一谈。Javascript 动画很快,而 jQuery 动画很慢。为什么呢?...jQuery使用了setInterval而不是 reqeustAnimationFrame(RAF),因为 RAF 会在窗口失去焦点时停止触发,这会导致jQuery的bug。...我的建议是:当你只在移动平台上开发,并且动画只是简单的状态切换,那么适合用 CSS transition。在这种情况下,transition 是高性能的原生支持方案。...jQuery就是因为这个原因没有使用RAF(如上所说),浏览器永远不会强行实施可能打破规范或者可能偏离期望行为的优化。

2K20

分享前端开发常用代码片段-值得收藏

你也可以使用 ID CLASS 替换 标签来检查某个特定的图像是否被加载。 三、自动修复破坏的图像 逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。 ?...只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。 ? 五、淡入淡出/显示隐藏 ?...('transform', 'rotate(90deg)'); } else { $('body').css('transform', 'rotate(0deg)');...如果没有定义处理程序,其他的 jQuery 代码会就此罢工。定义一个全局的 Ajax 错误处理程序 ?...三十一、链式插件调用 jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。 ? 通过使用链式,可以改善 ?

1.9K31

分享前端开发常用代码片段

你也可以使用 ID CLASS 替换 标签来检查某个特定的图像是否被加载。 三、自动修复破坏的图像 逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。 ?...只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。 ? 五、淡入淡出/显示隐藏 ?...如果没有定义处理程序,其他的 jQuery 代码会就此罢工。定义一个全局的 Ajax 错误处理程序 ?...三十一、链式插件调用 jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。 ? 通过使用链式,可以改善 ?...链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。

1.1K51

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

今天就针对该特效来说说如何开发(本次内容使用jQuery进行讲解,原生JavaScript代码下周一奉上) 功能效果图 ?...)前面为需要淡入淡出的对象,而方法括号中为参数,用于书写淡入淡出需要的时间,单位为毫秒(即如果书写的是1000,则表示1000毫秒,1000毫秒 = 1秒)。...hover事件 hover事件是jQuery中的事件,不存在于原生JavaScript当中,是mouseover(鼠标移入)与mouseout(鼠标移出)的功能综合体; hover事件的基本语法为:...在用户交互过程中,有可能会出现前一个动画还没有结束,新的动画就开启了,为了防止这个问题,我们通常根据需求在动画类效果的前面添加“stop()”方法,用于清除掉当前动画。...stop方法存在两个参数,参数均为布尔值(truefalse)。

8.7K50

jQuery」基础 - 01

1.1. jQuery 介绍 1.1.1 JavaScriptJavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。...常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等,这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript...是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。 1.2.5....因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...停止动画排队的方法为:stop(); stop()方法用于停止动画效果。 stop()写到动画或者效果的前面, 相当于停止结束上一次的动画。

6.9K21

前端开发者都应知道的 jQuery 小技巧

回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度...这段简单的代码可以帮上大忙: $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); 即使你没有任何损坏的链接...淡入淡出与滑动是我们经常使用 jQuery 做成的动画效果。...,触发 JavaScript: $(document).on('visibilitychange', function (e) { if (e.target.visibilityState ===...; } }); Ajax 调用的错误处理 当某次 Ajax 调用返回 404 500 错误,就会执行错误处理。但如果没有定义该处理,其他 jQuery 代码或许会停止工作。

2.3K30

JQuery基础

,它有以下功能: HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities(实用工具) 很多大公司都在使用...5.停止动画: stop()方法用于停止动画效果,适用于所有jQuery效果函数,包括滑动,淡入淡出,自定义动画。...如: $('p').css('font-size':'10px').show().hide(); 第六部分:jQuery HTML 1.获取内容和属性 --  获取内容: text():设置获取所选元素的文本内容...例如:$('p').remove('.test1'); empty():从被选元素中删除子元素(被选元素没有被删除,相当于留了一个外壳) 4.获取/设置css类: addClass():向被选元素中添加一个多个类...; removeClass():向被选元素中删除一个多个类; toggleClass():切换addClass()和removeClass(); css():设置获取css属性。

4.6K51
领券