jQuery - 常用动画小计animate()

文章目录：
1、show 列队动画	2、折叠菜单 slideDown(600)
3、图标动画 animate()

1、显示 / 隐藏

// 列队动画，逐个显示，递归自调用

// $('.test').first().show('fast') - 显示第一个
// $(this).next().show('fast') - 显示第二个，next()是第一个的意思
// tagshow - 自调用，从第二个开始显示下一个

// $('.test').first() 是第一个，先调用第一个
// $(this) 代表第一个
// $(this).next() 代表第一个的下面一个，也就是第二个，而第二个执行tagshow，则会再调用，执行递归函数，一直这么执行下去，直到退出

$('.show').click(function() {
    $('.test').first().show('fast',function tagshow() {  // tagshow() 函数名，递归自调用函数
        $(this).next().show('fast', tagshow)             //tagshow第二个自调用，执行到第三个，自己调用自己的函数
    })
})


<input type="button" class="show" value="显示">
<div class="test">我</div>
<div class="test">是</div>
<div class="test">前</div>
<div class="test">端</div>
<div class="test">开</div>
<div class="test">发</div>

2、折叠菜单：

$(function() {
    //1.0监听一级菜单的点击事件；
    $('.nav-item>li').click(function() {
        // 1.1 拿到二级菜单，children()拿到当前元素的儿子元素；
        var $sub = $(this).children('.sub');
        // 1.2 让二级菜单展开；
        $sub.slideDown(600);
        //$('.sub').eq($(this).index).slideDown(1000); // 可以直接替换1.1、1.2的步骤；

        // 1.3 拿到所有当前的非二级菜单
        var otherSub = $(this).siblings().children('.sub');
        // 1.4 让所有非当前的二级菜单收起
        otherSub.slideUp(600);

        //$('.sub').eq($(this).index()).slideDown(1000).siblings().slideUp(600);

        // 1.5让被点击的一级菜单的箭头旋转
        $(this).addClass('current');
        // 1.6 让所有非被点击的一级菜单删除class
        $(this).siblings().removeClass('.sub');

        // $(this).addClass('current').siblings().removeClass('.sub'); // 1.5、1.6的简写
    })
})

<div class="g-nav-box">
    <ul class="nav-item">
        <li> <h4>一级菜单 <span></span></h4>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li><h4>一级菜单 <span></span></h4>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</div>

.g-nav-box {
    display: inline-block;
    margin-left: 20%;
    overflow: hidden;
    border: 1px solid #333;
    border-radius: 5px;
}
.g-nav-box .nav-item {
    min-width: 200px;
    line-height: 2;
}
.sub {
    display: none;
}
.sub li {
    padding: 0 20px;
}
.sub li {
    border-top: 1px solid #fff;
    background: #f00;
}
.g-nav-box .nav-item h4 {
    position: relative;
    top: -1px;
    padding-left: 10px;
    margin: 0;
    border-top: 1px solid #333;
}

3、图标小动画：animate()

分析：
	第一个参数：接受一个对象，可以在对象中修改属性
	第二个参数：指定动画时常
	第三个参数：指定动画节凑，默认是swing，基本动画、滑动动画和淡入淡出动画都可以用
	第四个参数：动画执行完毕之后的回调函数

$(function() {
    $('button').eq(0).click(function() {
        $('.two').animate({
            marginLeft: 500,
            //关键字
            width: 'toggle'
        }, 1000, 'linear' ,function() {
            alert('自定义动画执行完毕！')
        })
    })
})

================== 分割线 ==================
$(function() {
    // 1.0 遍历所有的li，index为索引，ele为参数
    $('li').each(function(index,ele) {
        //1.1 生成图片的位置
        var $url = "url('./img/css_sprites.png') no-repeat -5px " + (index * -70) + "px";
        //1.2 生成新的图片位置 , children - li的儿子级， find - li下的所有子级
        $(this).find('span').css('background',$url);
    })

    //2.0 监听li的移入事件
    $('li').mouseenter(function() {
        //2.1 拿到当前li的span
        $('span').eq($(this).index()).animate({
            top: -60
        }, 'linear' , function() {
            //2.2 执行回调函数，将图片复位
            $(this).css('top','60px').animate({
                top: 0
            },'linear');
        })
    })
})

ul {
    display: flex;
    width: 500px;
    height: 400px;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin: 100px auto;
    overflow: hidden;
    text-align: center;
    border: 1px solid #333;
}
li {
    flex: 0 1 25%;
    overflow: hidden;
    list-style: none;
    cursor: pointer;
}
li p:first-child {
    height: 65px;
    overflow: hidden;
}
span {
    /* 绝对定位 为animate()动画做准备 */
    position: relative;
    display: inline-block;
    width: 65px;
    height: 100%;
    overflow: hidden;
    background: url('./img/css_sprites.png') no-repeat -5px 0;
}
================== 分割线 ==================
<ul>
    <li><p><span></span></p><p>图标</p></li>
</ul>