jQuery实现淡入淡出效果
更新时间：2021年08月08日 11:41:33 作者：Wellfancy
这篇文章主要为大家详细介绍了jQuery实现淡入淡出效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用jQuery完成淡入淡出效果前，我们先来认识几个代码：
- 淡入 fadeIn([ speed , [easing] , [fn] ])，参数都可不写
- 淡出 fadeOut([ speed , [easing] , [fn] ])，参数都可不写
- 淡入淡出切换 fadeToggle([ speed , [easing] , [fn] ])，参数都可不写
- 修改透明度 fadeTo([ [speed] , opacity , [easing] , [fn] ])，注意，这里速度和透明度一定要写
其中
- speed是速度
- easing是切换效果
- fn是回调函数
那我们把上述代码放到整体代码中看下效果
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wellfancy</title>
<style>
div {
margin: 10px;
padding: 10px;
width: 100px;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div>
<img src="images/1.jpg" style="width: 280px;">
</div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的2D双柱状图效果,结合实例形式分析了jQuery使用FusionCharts插件绘制2D双柱状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-05-05
JQuery触发radio或checkbox的change事件
在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下2012-12-12
这篇文章主要介绍了通过jQuery实现的顶部导航跟随滚动条滚动固定浮动在顶部,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery中:gt选择器用法,实例分析了:gt选择器的功能、定义及匹配大于给定索引值元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
JQuery 应用 JQuery.groupTable.js
在以往的项目中，数据浏览用的都table 的形式展现。如下图1， 这是一个很常见的表格。通常对分类的字段先进行排序。为了让分类表现的更直观。2010-12-12
这篇文章介绍了Jquery实现Ajax跨域访问的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了jQuery拖动元素并对元素进行重新排序的实现方法，感兴趣的小伙伴们可以参考一下2015-12-12
今天给大家分享一个jquery插件之步骤进度轴的实现思路，这个功能在一些网站注册账号时一般都会用到，今天就通过实例代码给大家详细介绍下，感兴趣的朋友跟随小编一起看看吧2021-05-05
这篇文章主要介绍了jQuery实现模拟marquee标签效果的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JQuery each()嵌套使用，非常适合初学者,需要的朋友可以参考下2014-04-04
最新评论