jQuery的淡入淡出

时间: 2019-08-05阅读: 206标签: jquery

在jQuery中的一些特效中,可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面为分别为大家介绍各个方式的使用。

jQuery fadeIn() 用于淡入已经被隐藏的元素,例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery淡入</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;display:none;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeIn();
                     $("#div2").fadeIn(1000);
                      $("#div3").fadeIn("slow");
           });
           });
      </script>
</head>
<body>
     <p>实例演示了 fadeIn()不同参数的效果。</p>
     <button>点击淡入 div 元素。</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>


jQuery fadeOut() 用于淡入已经被隐藏的元素,例子: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery淡出</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeOut();
                     $("#div2").fadeOut(1000);
                      $("#div3").fadeOut("slow");
           });
           });
      </script>
</head>
<body>
     <p>实例演示了 fadeIn()不同参数的效果。</p>
     <button>点击淡出 div 元素。</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>


jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeToggle()切换</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeToggle();
                     $("#div2").fadeToggle(1000);
                      $("#div3").fadeToggle("slow");
           });
           });
      </script>
</head>
<body>
     <p>实例演示了 fadeToggle() 不同参数的效果。</p>
     <button>点击切换 div 元素。</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeTo透明度</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeTo("slow",0.15);
                 $("#div2").fadeTo("slow",0.4);
                  $("#div3").fadeTo("slow",0.7);
           });
           });
      </script>
</head>
<body>
     <p>实例演示了 fadeTo不同参数的效果。</p>
     <button>点击fadeTo透明度 div 元素。</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/4528

jquery中toggleClass(), index()

toggleClass()对设置货已出被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类,如果不存在则添加类,如果已设置则将之删除。这就是所谓的切换效果,不过通过“switch”参数,只能够规定只删除或者添加类。

js和jquery设置css的几种方式

js设置样式的方法: 直接设置style的属性 某些情况用这个设置 !important值无效、直接设置属性(只能用于某些属性,相关样式会自动识别); 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数

在jQuery中使用自定义属性

在jquery中 自定义属性及值,默认以下都是在class=‘acitve‘对象中 进行自定义属性操作:自定义属性格式:data-xxxx;审查元素是看不到该属性的,只能输出控制台可以看到该值。

前端UI攻城狮 你们该抛弃jQuery了

Web工程师太依赖jQuery了,某种意义上说jQuery已经成了JavaScript的同义词。但是我们真的需要他么?或许我们应该反思一下什么时候才真的需要jQuery。对我个人而言开始使用jQuery的理由是他把我的工作变得简单多了

jQuery UI有四大功能

jQuery UI (译:jQuery用户界面) 是:以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件

jQuery常用知识总结

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程

两种方法使vue实现jQuery调用

vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作。而jQuery需要记忆的内容颇多

时隔一年,jQuery 发布 3.4.0 版本

jQuery 团队的核心开发者 Timmy Willison 今天在官网宣布了 jQuery 3.4.0,这距离上个版本 3.3.x 系列的推出已过去了一年多。Timmy 表示这可能是 3.x 分支的最后一个小版本更新,接下来的工作重心将是 jQuery 4.0 大版本的更新。

基于jQuery实现简单的js模块化

在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解决这个问题

jquery实现点击控制div的显示和隐藏

我们使用点击显示、点击隐藏的时候,一般有两种可选方案,toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全