今天我给大家讲一下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. apache用户认证，ssl双向认证配置

    安装环境: OS:contos 6.4 httpd:httpd-2.2.15-59.el6.centos.i686.rpm openssl:openssl-1.0.1e-57.el6.i686.rpm ...

  2. 1008 Elevator

    Problem Description The highest building in our city has only one elevator. A request list is made u ...

  3. 关于爬楼梯的lintcode代码

    讲真的,这个我只会用递归去做,但是lintcode上面超时,所以只有在网上找了个动态规划的,虽然这个程序懂了,但是我觉得还是挺不容易的真正弄懂的话-- class Solution {public:  ...

  4. springcloud(四)：熔断器Hystrix

    说起springcloud熔断让我想起了去年股市中的熔断,多次痛的领悟,随意实施的熔断对整个系统的影响是灾难性的,好了接下来我们还是说正事. 熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基 ...

  5. sublime Text3 新建文件时定义模块

    开发的过程中有很多的东西,不需要每次编写,如果每次编写这样会很蛋疼,所以sublime 提供了一个牛逼的插件SublimeTmpl, 这个插件可以定义自己新建的模块. sublimeTmpl 安装 1 ...

  6. [Angularjs]$http.post与$.post

    摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇到在服务端无法接受到参数的情况,这里有必要与$.post进行比较学习一下. 一个例子 这里模拟登录的一个场 ...

  7. JVM与对象初始化

    一个对象从无到有的过程 A a = new A() 1.JVM遇到new指令就会去堆内存分配一块内存空间,内存的大小在编译期间就可以确定 2.接着调用A的构造函数,这里构造的时候会沿着继承树逆流而上, ...

  8. Mac电脑如何搭建php环境,并且开发php.

    这篇文章主要介绍了Mac下搭建php开发环境教程,Mac OS X 内置了Apache 和 PHP,这样使用起来非常方便.本文以Mac OS X 10.12.4为例,需要的朋友可以参考下! Mac O ...

  9. Hibernate SQLQuery 原生SQL 查询及返回结果集处理-2

    1. 返回List, .setResultTransformer(      Transformers.ALIAS_TO_ENTITY_MAP);将结果转为Map,存放到list中,即list中为若干 ...

  10. DOM4J介绍与代码示例(2)-XPath 详解

    XPath 详解,总结 XPath简介 XPath是W3C的一个标准.它最主要的目的是为了在XML1.0或XML1.1文档节点树中定位节点所设计.目前有XPath1.0和 XPath2.0两个版本.其 ...