jquery动画，导航条功能1月24日

动画效果实例

<!DOCTYPE html>
<html>
<head>
   <title>练习</title>
   <link rel="icon" type="image/x-icon" href="images/2.png"> 
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <style type="text/css">
     *{margin:0;padding: 0; }
      .content{margin:20px;font-size:20px;color: #fff;float: left; }
      .content p{height: 160px;width: 200px;background: red;text-align: center;line-height: 160px;position: relative;}
      .content button{height: 40px;width: 200px;border:none;}
      #box{width: 95px;height: 40px;border:none;}
      #text{text-shadow: 3px 3px 3px #ff6500;color: #fff;font-size: 25px;}
   </style>
</head>
<body> 
<div class="content">
   <button class="btu1">点我隐藏</button>
   <p class="box1">~ 我是hide ~</p>
</div>
<div class="content">
   <button class="btu2">点我显示</button>
   <p class="box2">~ 我是show ~</p>
</div>
<div class="content">
   <button class="btu3">事件切换</button>
   <p class="box3">~ 我是toggle ~</p>
</div>
<div class="content">
   <button class="btu4">淡入元素</button>
   <p class="box4">~ 我是fadeIn ~</p>
</div>
<div class="content">
   <button class="btu5">淡出元素</button>
   <p class="box5">~ 我是fadeOut ~</p>
</div>
<div class="content">
   <button class="btu6">淡出到指定值</button>
   <p class="box6">~ 我是fadeOut ~</p>
</div>
<div class="content">
   <button class="btu7">下滑效果</button>
   <p class="box7">~ 我是slideDown~</p>
</div>
<div class="content">
   <button class="btu8">上滑效果</button>
   <p class="box8">~ 我是slideUp ~</p>
</div>
<div class="content">
   <button class="btu9">动画效果</button>
   <p class="box9">~ 我是animate ~</p>
</div>
<div class="content ">
   <button class="btu10" id="box">动画效果</button>  <button class="btu11" id="box">停止动画</button>
   <p class="box10">~ 我是animate ~</p>
</div>
<div class="content">
   <button class="btu12">callback</button>
   <p class="box12">~ 我是callback ~</p>
</div>
<div class="content">
        <button class="btu13">callback</button>
        <p class="box13">~ 更改函数 ~</p>
     </div>
<script>
    $(function(){
        //jquery显示/隐藏
        // hide(speed,cllback)隐藏显示元素
        $('.btu1').click(function(){
            $('.box1').hide(1000)
        })
        $('.box2').hide()
        $('.btu2').click(function(){
            $('.box2').show(1000)
        })
        // toggle（speed，caback）事件切换 显示被隐藏元素，并隐藏已显示元素
        $('.btu3').click(function(){
            $('.box3').toggle()
        })
        //淡入淡出效果
        //jquery是通过控制不透明的变化来空值匹配到的元素的淡入淡出的效果
        //fadeIn（speed，callback）用于淡入已隐藏的元素；
        $('.box4').hide()
        $('.btu4').click(function(){
            $('.box4').fadeIn(3000)
        })
        //fadeOut用于淡出可见元素
        $('.btu5').click(function(){
            $('.box5').fadeOut(3000)
        })
        //fadeTo(speed, opacity callback)把所有匹配到元素的不透明度以渐进方式调整到指定不透明度；
        //opacity;fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
        $('.btu6').click(function(){
            $('.box6').fadeTo(3000,0.1)
        })
        //滑动效果
        // slideDown（speed，callback）通过高度的变化，向下增大的动态效果 下滑效果；
        $('.box7').hide()
        $('.btu7').click(function(){
            $('.box7').slideDown(2000)
        })
        $('.btu8').click(function(){
            $('.box8').slideUp(2000)
        })
        //动画效果
        //animate（speed，callback）方法用于创建自定义动画
        // 语法：$(selector).anmiate({params},speed,callback);
        $('.btu9').click(function(){
            $('.box9').animate({fontSize:30},500)
        })
        $('.btu10').click(function(){
            $('.box10').animate({
                left:'400px',
                opacity:'0.3',
                width:'200px',
                height:'200px',
                leftHeight:'200px'
            },5000)
        })
        // 停止动画



        // stop（）方法用于停止动画或效果，在他们完成之前，该方法适用于所有jquery效果函数，包括滑动/淡入淡出和自定义动画
        $('.btu11').click(function(){
            $('.box10').stop()
        })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：

hide(speed,cllback)隐藏显示元素

$('.btu1').click(function(){
            $('.box1').hide(1000)
        })
        $('.box2').hide()
        $('.btu2').click(function(){
            $('.box2').show(1000)
        })

toggle（speed，caback）事件切换显示被隐藏元素，并隐藏已显示元素

$('.btu3').click(function(){
            $('.box3').toggle()
        })

fadeIn（speed，callback）用于淡入已隐藏的元素；

$('.box4').hide()
        $('.btu4').click(function(){
            $('.box4').fadeIn(3000)
        })

fadeOut用于淡出可见元素

$('.btu5').click(function(){
            $('.box5').fadeOut(3000)
        })

fadeTo(speed, opacity callback)把所有匹配到元素的不透明度以渐进方式调整到指定不透明度
```
$('.btu6').click(function(){
            $('.box6').fadeTo(3000,0.1)
        })
```
slideDown（speed，callback）通过高度的变化，向下增大的动态效果下滑效

$('.box7').hide()
        $('.btu7').click(function(){
            $('.box7').slideDown(2000)
        })
        $('.btu8').click(function(){
            $('.box8').slideUp(2000)
        })

7.animate（speed，callback）方法用于创建自定义动画

$('.btu9').click(function(){
            $('.box9').animate({fontSize:30},500)
        })
        $('.btu10').click(function(){
            $('.box10').animate({
                left:'400px',
                opacity:'0.3',
                width:'200px',
                height:'200px',
                leftHeight:'200px'
            },5000)
        })

导航条实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css">
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100%;
        height: 70px;
        background: #f5f5f5;
        box-shadow: 1px 1px 10px #ccc;
        line-height: 70px;
        position: relative;
        top: -65px;
    }
    form{
        width: 800px;
        margin:0 auto;
        line-height: 70px;
        position: relative;
    }
    input{
        width: 800px;
        height: 35px;
        border: 0;
        border-radius: 4px;
        padding-left: 15px;
    }
    form i{
        position: absolute;
        right: 10px;
        top: 0px;
    }
    .layui-icon{
        font-size: 23px;
    }
    span{
        position: absolute;
        width: 48px;
        height: 48px;
        display: block;
        background: url(show.jpg) -64px 168px;
        right:0;   
    }
    .menu{
        width: 1000px;
        height: 40px;
        line-height: 40px;
        margin: 20px auto;
        background: #f5f5f5;
    }
    .menu li{
        float: left;
        text-align: center;
        width: 10%;
        font-weight: bold;
    }
    .one li:hover a{
        color: #fff;
    }
    .two{
        position: relative;
    }
    .ba{
        position: absolute;
        width: 100px;
        height: 3px;
        background: #ff6500;
        top: 37px;
    }
    .three{
        position: relative;
    }
    .three li{
        position: relative;
    }
    .three li ul{
        position: relative;
        width: 100px;
        box-shadow: 0 2px 5px #f5f5f5;
        display: none;
        top: -1px;
    }
    .three li ul li{
        width: 100px;
        line-height: 40px;
    }
    .three li ul li:hover{
        background: #f5f5f5;
    }
    .layui-icon{
        font-size: 13px;
        margin-left: 7px;
    }
    </style>
</head>
<body>
    <div class="box">
                <form>
                    <input type="text" placeholder="# 请输入关键词 #">
                    <i class="layui-icon"></i>
                </form>
                <span></span>
    </div>
    <ul class="menu one"> 
            <li name="0"><a href="">要闻</a></li>
            <li name="1"><a href="">国际</a></li>
            <li name="2"><a href="">国内</a></li>
            <li name="3"><a href="">社会</a></li>
            <li name="4"><a href="">军事</a></li>
            <li name="5"><a href="">娱乐</a></li>
            <li name="6"><a href="">体育</a></li>
            <li name="7"><a href="">汽车</a></li>
            <li name="8"><a href="">科技</a></li>
            <li name="9"><a href="">其他</a></li>
        </ul>
        <ul class="menu two"> 
                <li name="0"><a href="">要闻</a></li>
                <li name="1"><a href="">国际</a></li>
                <li name="2"><a href="">国内</a></li>
                <li name="3"><a href="">社会</a></li>
                <li name="4"><a href="">军事</a></li>
                <li name="5"><a href="">娱乐</a></li>
                <li name="6"><a href="">体育</a></li>
                <li name="7"><a href="">汽车</a></li>
                <li name="8"><a href="">科技</a></li>
                <li name="9"><a href="">其他</a></li>
                <div class="ba"></div>
            </ul>
            <ul class="menu three"> 
                    <li name="0"><a href="">要闻</a></li>
                    <li name="1"><a href="">国际</a></li>
                    <li name="2"><a href="">国内</a></li>
                    <li name="3"><a href="">社会</a></li>
                    <li name="4"><a href="">军事</a></li>
                    <li name="5"><a href="">娱乐</a></li>
                    <li name="6"><a href="">体育</a></li>
                    <li name="7"><a href="">汽车</a></li>
                    <li name="8"><a href="">科技</a></li>
                    <li><a href="">其他</a><i class="layui-icon layui-icon-up"></i>
                        <ul>
                            <li><a href="">傻的吗？</a></li>
                            <li><a href="">傻的吗？</a></li>
                            <li><a href="">傻的吗？</a></li>
                        </ul>
                    </li>
            </ul>
    <script>
        $(function(){
            // focus获得焦点
            $('input').focus(function(){
                $(this).css('box-shadow','0 0 5px #ff6500 inset')
            })
            // blur失去焦点
            $('input').blur(function(){
                $(this).css('box-shadow','')
            })
            $('.box').hover(
            function(){
                //向上滑动，只要用到animate方法也要用stop，stop就是只要鼠标移出，立即停止当前的动画效果
                $(this).stop().animate({'top':'2px'},500)
            },
            function(){
                // 向下滑动
                $(this).stop().animate({'top':'-65px'},500)
            })

            // 第一个导航
            $('.one>li').hover(function(){
                $(this).css('background','#ff6500')
            },function(){
                $(this).css('background','#f5f5f5')
            })

            // 第二个导航
            $('.two>li').hover(function(){
                $x=parseInt($(this).attr('name'))*100
                $('.ba').stop().animate({left:$x+'px'},300)
            },function(){
                $('.ba').stop().animate({left:'0'},300)
            })

            // 第三个导航
            $('.three ul').hide()
            $('.three>li').hover(function(){
                $(this).find('i').attr('class',"layui-icon layui-icon-down")
                $(this).find('ul').slideDown(300)
            },function(){
                $(this).find('i').attr('class',"layui-icon layui-icon-up")
                $(this).find('ul').slideUp()
            })
        })
    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：

导航条1：隐藏，下滑

$('input').focus(function(){
                $(this).css('box-shadow','0 0 5px #ff6500 inset')
            })
            // blur失去焦点
            $('input').blur(function(){
                $(this).css('box-shadow','')
            })
            $('.box').hover(
            function(){
                //向上滑动，只要用到animate方法也要用stop，stop就是只要鼠标移出，立即停止当前的动画效果
                $(this).stop().animate({'top':'2px'},500)
            },
            function(){
                // 向下滑动
                $(this).stop().animate({'top':'-65px'},500)
            })

导航条2：鼠标移到元素上改变背景颜色

$('.one>li').hover(function(){
                $(this).css('background','#ff6500')
            },function(){
                $(this).css('background','#f5f5f5')
            })

导航条3：鼠标移到元素上移动span

$('.two>li').hover(function(){
                $x=parseInt($(this).attr('name'))*100
                $('.ba').stop().animate({left:$x+'px'},300)
            },function(){
                $('.ba').stop().animate({left:'0'},300)
            })

导航条4：

$('.three ul').hide()
            $('.three>li').hover(function(){
                $(this).find('i').attr('class',"layui-icon layui-icon-down")
                $(this).find('ul').slideDown(300)
            },function(){
                $(this).find('i').attr('class',"layui-icon layui-icon-up")
                $(this).find('ul').slideUp()
            })

动画效果实例

导航条实例

相关文章