javaScript的一些奇妙动画

今天我给大家讲一下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: 0;padding: 0;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: 0 auto;overflow: hidden;}
        ol li{width: 30px;height: 30px;background-color: #2534a9;float: left;border-radius: 50%;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:0;color: white;font-size: 50px;}
        #a1{left: 0;top: 40%;position: absolute;}
        #a2{left: 770px;position: absolute;top: 40%}
    </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="images/buttom_0.jpg"/></li>
        <li><img src="images/buttom_1.jpg"/></li>
        <li><img src="images/buttom_2.jpg"/></li>
    </ul>
    <ol>
        <li class="lia">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <a href="#" id="a1"><</a>
    <a href="#" id="a2">></a>
</div>
<script>
    var index=0;
    var timer=setInterval(function(){
        if(index<$("ul li").length-1){
            index ++;
        }else{
            index=0
        }
        changeImg(index)
    },2500)

    $("ol").find("li").each(function(items){
       $("this").hover(function(){
           clearInterval(timer);
           changeImg(items);
           index=index
       },function(){
           timer=setInterval(function(){
               if(index<$("ul li").length-1){
                   index ++;
               }else{
                   index=0;
               }
               changeImg(index);
           },2500);
       })
    })

    function changeImg(index){
        $("ul li").hide().eq(index).fadeIn(1000);
        $("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<0){
           index=$("ul li").length-1;
        }
        changeImg(index);
    })


    $("img").hover(
            function(){
                clearInterval(timer);
            },
            function(){
                timer=setInterval(function(){
                    if(index<$("ul li").length-1){
                        index++;
                    }else{
                        index=0;
                    }
                    $("ul li").hide().eq(index).fadeIn(1000)
                    $(".ol li").removeClass("lia").eq(index).addClass("lia")
                },3000)
            }
    )

</script>
</body>
</html>

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

posted @ 2017-06-10 23:49 那一刻~~~掩护你阅读(212) 评论(0) 收藏举报

刷新页面返回顶部

那一刻~~~掩护你

javaScript的一些奇妙动画

公告