首页 / JQUERY / jQuery中如何实现淡入淡出效果

jQuery中如何实现淡入淡出效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery中如何实现淡入淡出效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1638字，纯文字阅读大概需要3分钟。

内容图文

jQuery中有四种方法分别为fadeIn()、fadeOut()、fadeToggle()、fadeTo()，通过这四种方法可以实现淡入淡出的效果

今天要分享的是如何通过jQuery来实现淡入淡出的效果，具有一定的参考作用，希望对大家有所帮助

jQuery中如何实现淡入淡出效果 - 文章图片

【教程推荐：jQuery教程】

jQuery具有四种fade方法，分别是fadeIn()、fadeOut()、fadeToggle()、fadeTo()接下来在文章中将为大家具体介绍这几种方法如何实现淡入淡出效果

fadeIn()方法

主要用于淡入已隐藏的元素，它有两个参数分别为:

speed ：表示效果的时长，可取“slow" ,"fast”或者是自定义的时间值。它是可选参数

callback :表示淡入效果完成后所执行的函数名称

fadeOut() 方法

主要用于淡出可见元素，它的参数值与fadeIn的值一样

fadeToggle() 方法

这个方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

fadeTo() 方法

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

fadeTo方法中除了包含speed和callback函数以外，还多了一个必需的 opacity 参数，目的在于将淡入淡出效果设置不透明度

实例分享:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #img{
      width:300px;
      height:200px;
      position: absolute;
      top:40px;
    }
    button{
      position: absolute;
      top:10px;
    }
  </style>
</head>
<body>
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
   $("#img").fadeToggle(3000).fadeTo(0.5);
  });
});
</script>
<button>点击</button>
<img src="./images/22.jpg" id="img">
</body>
</html>

效果图：

jQuery中如何实现淡入淡出效果 - 文章图片

总结：以上就是本篇文章的全部内容了，希望通过这篇文章可以帮助大家学会如何通过jQuery来实现淡入淡出效果

注：本篇文章参考jQuery教程手册中的jQuery淡入淡出一节

以上就是jQuery中如何实现淡入淡出效果的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的jQuery中如何实现淡入淡出效果全部内容，希望文章能够帮你解决jQuery中如何实现淡入淡出效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/283558.html

来源：【匿名】