今天我给大家讲一下JavaScript中的显示隐藏、淡入淡出的效果

　　显示与隐藏动画效果

　　　show()方法:

　　　　　　show()方法会动态地改变当前元素的高度、宽度和不透明度，最终显示当前元素，此时元素的css属性display恢复为除了none之外的初始值。

　　　　　　　其语法结构为：jQuery对象.show(duration,[fn]); 其中要注意当参数duration表示动画效果运行的时间，可以使用关键字slow、normal和fast，分别对应时间长度0.6秒、0.4秒和0.2秒，此时参数要加引号；也可以使用数值，单位默认为毫秒，此时参数不需要加引号。

　　　　hide()方法：

　　　　　　　hide()方法会动态改变当前元素的高度、宽度和不透明度，最终隐藏当前元素，此时元素的css属性display修改为none。

　　　　　　　其语法结构为：jQuery对象.hide(duration,[fn]);

　　　对于显示和隐藏我给大家举个例子：

　　当点击 选项卡时，会使相对应的内容显示，让与其无关的内容隐藏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /**{margin: 0;padding: 0}*/
        span{display: inline-block}
        #list{width: 197px;border: solid 1px #cccccc;text-align: center;background-color: #00FFCC}
        #list span{width: 60px;height: 30px;background-color: #00FFCC}
        #list .biao{background-color: orange}
        #con{border: 1px solid #cccccc;width: 197px;}
        #con div{border: 1px solid #cccccc;width: 197px;height: 250px}
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="list">
    <span class="biao">标题一</span>
    <span>标题二</span>
    <span>标题三</span>
</div>
<div id="con">
    <div>内容1</div>
    <div style="display:none;height: 250px;">内容2</div>
    <div style="display:none;height: 250px;">内容3</div>
</div>
<script>
    $(function(){
        $("#list span").click(function(){
            $(this).addClass("biao").siblings().removeClass("biao");
            var index=$("#list span").index(this);
            $("#con div").eq(index).show().siblings().hide()
        })
    })
</script>
</body>
</html>

　          toggle()方法:

　　　toggle()方法除了可以模拟鼠标的连续单击事件之外，同时还会动态地改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态。即如果元素是可见的，则被切换为隐藏状态；如果元素是隐藏的，则被切换为可见状态。

　　　其语法结构为:jQuery对象.toggle(duration,[fn]);

　　淡入与淡出动画效果

           fadeIn()方法 :

　　　fadeIn()方法动态地改变当前元素的透明度(其他不变)，实现淡入的动画效果，最终显示当前元素，此时元素的css属性display恢复除了none之外的初始值。

　　其语法结构为:jQuery对象.fadeIn(duration,[fn])

　   fadeOut()方法：

fadeOut()方法动态地改变当前元素的透明度（其他不变），实现淡出的动画效果，最终隐藏当前元素，此时元素的css属性display修改为none。　

　　其语法结构为:jQuery对象.fadeOut(duration,[fn]);

　　　　我来给大家展示一个带有淡入淡出的轮播图：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin: ;padding: ;list-style: none}

        img{width: 800px;height: 400px;}

        ul li{width: 800px;height: 400px;display: none}

        ul{width: 3200px;height: 400px;}

        ul #li1{display: inline;}

        #box{width: 800px;height: 400px;position: relative;margin:  auto;overflow: hidden;}

        ol li{width: 30px;height: 30px;background-color: #2534a9;float: left;border-radius: %;line-height: 30px;text-align: center;margin-right: 5px;color: white;}

        ol{position: absolute;height: 30px;right: 15px;bottom: 10px;  z-index: auto;}

        .lia{background: #F60;color:#fff;}

        a{position: absolute;left: 10px;botton:;color: white;font-size: 50px;}

        #a1{left: ;top: %;position: absolute;}

        #a2{left: 770px;position: absolute;top: %}

    </style>

</head>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<body>

<div id="box">

    <ul>

        <li id="li1"><img src="data:images/buttom_0.jpg"/></li>

        <li><img src="data:images/buttom_1.jpg"/></li>

        <li><img src="data:images/buttom_2.jpg"/></li>

    </ul>

    <ol>

        <li class="lia"></li>

        <li></li>

        <li></li>

    </ol>

    <a href="#" id="a1"><</a>

    <a href="#" id="a2">></a>

</div>

<script>

    var index=;

    var timer=setInterval(function(){

        if(index<$("ul li").length-){

            index ++;

        }else{

            index=

        }

        changeImg(index)

    },)

    $("ol").find("li").each(function(items){

       $("this").hover(function(){

           clearInterval(timer);

           changeImg(items);

           index=index

       },function(){

           timer=setInterval(function(){

               if(index<$("ul li").length-){

                   index ++;

               }else{

                   index=;

               }

               changeImg(index);

           },);

       })

    })

    function changeImg(index){

        $("ul li").hide().eq(index).fadeIn();

        $("ol li").removeClass("lia").eq(index).addClass("lia");

    }

    $("#a1").click(function(){

        index ++;

        if(index==$("ul li").length) index;

        changeImg(index);

    })

    $("#a2").click(function(){

        index --;

        if(index<){

           index=$("ul li").length-;

        }

        changeImg(index);

    })

    $("img").hover(

            function(){

                clearInterval(timer);

            },

            function(){

                timer=setInterval(function(){

                    if(index<$("ul li").length-){

                        index++;

                    }else{

                        index=;

                    }

                    $("ul li").hide().eq(index).fadeIn()

                    $(".ol li").removeClass("lia").eq(index).addClass("lia")

                },)

            }

    )

</script>

</body>

</html>

以上是我的简单理解，望大神们提出更好地内容！

javaScript的一些奇妙动画的更多相关文章

  1. FK JavaScript之:ArcGIS JavaScript API之地图动画

    地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度 本文目的:对ArcGIS JavaScr ...

  2. 秀才提笔忘了字：javascript使用requestAnimationFrame实现动画

    requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的 ...

  3. JavaScript基于时间的动画算法

    转自:https://segmentfault.com/a/1190000002416071 前言 前段时间无聊或有聊地做了几个移动端的HTML5游戏.放在不同的移动端平台上进行测试后有了诡异的发现, ...

  4. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  5. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

  6. javascript,css3加载动画

    html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  7. JavaScript之事件及动画

    一.事件 常用事件 click(function(){...}) //单击事件 hover(function(){...}) //鼠标经过事件 blur(function(){...}) //失去光标 ...

  8. javascript总结47: JS动画原理&jQuery 效果- 各种动画

    1 动画的原理就是: 盒子本身的位置+步长 2 什么是步长? var box=document.getElementById('box'); btn.onclick = function() { // ...

  9. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. HashSet实现原理

    /* HashSet的实现原理: 往HashSet添加元素的时候,HashSet会先调用元素的hashCode方法得到元素的哈希值 , 然后通过元素 的哈希值经过移位等运算,就可以算出该元素在哈希表中 ...

  2. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  3. C#基础知识-流程控制的应用（四）

    流程控制我们在编程中运用到的地方非常的多,在上篇中仅仅只是简单的介绍每一种的使用,并没有运用到实例中,很难去理解它真正的作用.下面我们将实际的运用流程控制的代码写一些实例相关的程序,加深对流程控制的理 ...

  4. node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...

  5. python中从文件中读取数据2

    #average7.py 文件中有多行,且每行有多个数字用逗号隔开 def main(): fileName = input("What file are numbers in?" ...

  6. Web测试到底是在测什么（资料合集）

    开始今晚的主题之前 先来看一张图, 这是老徐16年10月份,线上Web主题分享时整理的大纲 图片略模糊 看得清就好 Web测试, 进行抽离拆分,基本上就如上一些内容. 不管是测什么系统,什么功能,基本 ...

  7. 清理我的 Mac

    在Macbook使用久之后,会发现本来还富裕的硬盘,变得越来越少,尤其现在Macbook使用容量很小的固态硬盘.在此种情况下,该如何清理Macbook垃圾文件,以保证Macbook有足够空间做其他事情 ...

  8. ng-option

    select 是 AngularJS 预设的一组directive.下面是其官网api doc给出的用法:AngularJS:select 大意是,select中的ngOption可以采用和ngRep ...

  9. 使用JsonConfig控制JSON lib序列化

    将对象转换成字符串,是非常常用的功能,尤其在WEB应用中,使用 JSON lib 能够便捷地完成这项工作.JSON lib能够将Java对象转成json格式的字符串,也可以将Java对象转换成xml格 ...

  10. （数字IC）低功耗设计入门（一）

    低功耗设计这个专题整理了好久,有一个月了,有图有证据: 然而最近一直有些烦心事.郁闷事,拖延了一下,虽然现在还是有点烦,但是还是先发表了吧.下面我们就来聊聊低功耗设计吧,由于文章比较长,因此我就不一次 ...