今天我给大家讲一下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. mysql,oracle,sqlserver使用jdbc连接数据库总结

    jdbc连接数据是javaweb开发的一个重点,今天特此来总结一下,加深记忆. jdbc连接数据库一共分为三步: 1:加载驱动 需要去下载各自的驱动jar包,可以去网上搜索一下. 模板:加载驱动程序: ...

  2. 九思老客户分享：部署OA办公系统的四大意义

    原文:http://www.jiusi.net/detail/472__776__4009__1.html 关键词:OA办公系统.oa系统 .九思OA 九思老客户分享:部署OA办公系统的四大意义 当今 ...

  3. linux-redhat-iso 下载

    http://archive.download.redhat.com/pub/redhat/linux/9/en/iso/i386/ http://www.jb51.net/do/plus/downl ...

  4. JS立即执行函数表达式（IIFE）

    原文为 http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife ----------------- ...

  5. vue视频学习笔记01

    video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...

  6. 《大型网站系统与JAVA中间件实践学习笔记》-1

    第一章:分布式系统介绍 定义:分布式系统是一组分布在网络上通过消息传递进行协作的计算机组成系统. 分布式系统的意义 升级单机处理能力的性价比越来越低 单机处理器能力存在瓶颈 处于稳定性和可用性考虑 阿 ...

  7. 【JAVAWEB学习笔记】12_Http&Tomcat

    一.Http协议 1．什么是Http协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的     一种网络协议.所有的WWW文件都必须遵守这 ...

  8. JDFS:一款分布式文件管理实用程序第一篇(线程池、epoll、上传、下载)

    一 前言 截止目前,笔者在博客园上面已经发表了3篇关于网络下载的文章,这三篇博客实现了基于socket的http多线程远程断点下载实用程序.笔者打算在此基础上开发出一款分布式文件管理实用程序,截止目前 ...

  9. chrome的断点调试

    DOM节点变化时触发断点具体触发条件可分3种情况:子节点有变化.节点的属性发生变化或这个节点被删除.可以快速找到对应的事件处理函数. 条件断点 写一个表达式,表达式为 true 时才触发该断点. 在D ...

  10. ListView的使用（一）

    在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示. 列表的显示需要三个元素: 1．ListVeiw 用来展示列表的View. 2．适 ...