jQuery动画-----标准动画（show、hide、toggle）

<script>
    // jQuery的标准动画
    // 通过类似于动画的形式,来完成标签的显示隐藏
    // 实际上,本质,就是我们之前写的 运动函数
    //    通过 定位的 left  top 属性 和 透明度 opacity 来完成效果

    // 1, $(标签).show()  显示
    //    语法 : $(标签).show(时间,运动曲线,运动结束时执行的函数)
    //    运动到指定的位置,也就是css样式,定义的标签位置
    //    离那里进,就从那里开始运动
    //    离 左上角近 就从左上角开始运动

    // 2, $(标签).hide()  隐藏
    //    语法 : $(标签).hide(时间,运动曲线,运动结束时执行的函数)
    //    从原始的位置,开始隐藏
    //    离那里进,就隐藏到那里

    // 3, $(标签).toggle()  切换
    //    语法 : $(标签).toggle(时间,运动曲线,运动结束时执行的函数)
    //    隐藏就改为显示,显示就改为隐藏
    //   

    // 给显示按钮,添加事件
    $('[name="show"]').click(function(){
        $('div').show( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    })


    // 给隐藏按钮,添加事件
    $('[name="hide"]').click(function(){
        $('div').hide( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    })

    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').toggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    })

</script>