今天我给大家讲一下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. 生产环境中使用Docker Swarm的一些建议

    译者按: 实践中会发现,生产环境中使用单个Docker节点是远远不够的,搭建Docker集群势在必行.然而,面对Kubernetes, Mesos以及Swarm等众多容器集群系统,我们该如何选择呢?它 ...

  2. jenkins 使用注意

    在jenkins使用的时候,在输入文件地址的时候,文件各级目录不能有空格等特殊符号!否则报错!

  3. IOS的KVC

    KVC作用 KVC类似于java中的反射,它是通过一个字符串 key 来获取和设置对应类中成员属性的值而key就是用来遍历某一个类,去查找类内部是否有与key同名的成员属性 所以对于KVC来说,成员属 ...

  4. mysql主从复制-异步复制

    一.创建复制账号:      在Master的数据库中建立一个备份帐户:每个Slave使用标准的MySQL用户名和密码连接master.      进行复制操作的用户会授予REPLICATION SL ...

  5. hdu1151 Air Raid 二分匹配

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1151 求最小路径覆盖 二分图最小路径覆盖=点的个数-最大匹配. 代码: #include<ios ...

  6. 添加本地jar包到本地的Maven仓库以及在Maven仓库中搜索想要添加的jar包

    今天在学习Memacached的时候,将java_memcached-release下载下来,要使用maven来集成相关的jar包,Memcached的jar包如下: java_memcached-r ...

  7. Spring MVC动态切换数据源（多数据库类型）

    最近由于项目需求,需要将Sql Server 和 Mysql 两种数据库整合到一个项目,项目的用到的框架是SSM. 因此尝试了利用AOP切面来切每次执行的Servcie方法,根据Service所在的包 ...

  8. Lesser known dplyr tricks

    In this blog post I share some lesser-known (at least I believe they are) tricks that use mainly fun ...

  9. 360你吃屎啊你，hao123,12345等等

    请看到这个文章的小伙伴将文章看完,看看我的感受是有多深,谢谢了 现在浏览器已经是人们经常用的东西,相信都有时不时就差度娘的习惯吧 也就是说每个人都有自己喜欢的主页 可电脑有时候就是遭不住,360什么的 ...

  10. 为女票写的计算工作时间的SQL

    排除非工作时间.非工作日后,计算工作时间,代码如下: -- 删除函数 DROP FUNCTION IF EXISTS calculateWorkingTime; set @workStartTime= ...