jQuery的淡入淡出

时间: 2019-08-05阅读: 1158标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

jquery动画实现_浅谈jQuery之动画

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

jquery中toggleClass(), index()

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

Jquery插件开发的方法总汇

jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:$.extend(),$.fn,$.widget()

jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动画的实现

一个简单的鼠标滑过的动画而已,但是当我测试的时候发现。事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,这是由于元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完。

jQuery ui中sortable draggable droppable的使用

最近工作中用到了jQuery UI中排序和拖拽功能,花了大概一天的时间,搞清楚了大概的参数配置,以及遇到的一些问题,总结如下。

前端jquery防止数据重复提交

前端在向后端进行数据提交的时候,通常会需要在第一次提交返回前,阻止用户在快速点击发送二次请求,即防止重复提交,最简单的方法是使用标志参数或者 class 元素控制

高效Web开发的10个jQuery代码片段

在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来。

jquery寻找节点

通过javascript的getElementsByTagName获取到的节点的元素是一个dom合集对象 , 通过jQuery生成的对象是一个做了包装处理的对象 。注意上面的方法 返回的是jquery 集合 需要继续用jq的方法操作或取值。

原生js中DOM对象转成jQuery对象、jQuery 对象转成 DOM 对象的实现

jquery是对js语言的封装、扩展,实现了对浏览器的兼容,使用jquery能让操作更方便简洁,这篇文章主要讲解原生js中Dom对象和jquery对象的相互转换。

点击更多...

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