jQuery_淡入淡出

jQuery_淡入淡出

淡入淡出：不断改变元素的透明度（opacity）来实现的

1.fadeIn():带动画的显示

2.fadeOut()：带动画的隐藏

3.fadeToggle()：带动画切换显示/隐藏

 

滑动动画：不断改变元素的宽度来实现

1.slideDown():带动画的展开

2.slideUp():带动画的收缩

3.slideToggle()：带动画的切换展开/收缩

 

显示隐藏：默认没有动画

（不断改变元素的透明度（opacity）来实现的/不断改变元素的宽度来实现）

1.show():(不)带动画的显示

2.hide():(不)带动画的隐藏

3.toggle():(不)带动画的切换显示/隐藏

 

自定义动画_练习

jQuery动画本质：在指定时间内不断改变元素样式值来实现的

1.animate():自定义动画效果的动画

2.stop()：停止动画

    <script type="text/javascript">
        /**
         * 1.逐渐扩大
         *  1）.宽、高都扩大200px
         *  2）.宽先扩为200px，高后扩为200px
         * 2.移动到指定位置
         *  1）移动到(500,100)处
         *  2）移动到（100，20）处
         * 3.移动指定的距离
         *  1）移动距离为(100，50)
         *  2）移动距离为(-100，-20)
         * 4.停止动画
         */
        $(function () {
          /*  1.逐渐扩大
            *  1）.宽、高都扩大200px
            *  2）.宽先扩为200px，高后扩为200px
            *  */
            var $div = $('div')
            $('#btn1').click(function () {
                $div.animate({
                    width:200,
                    height:200
                },1000)
            })
            $('#btn1').click(function () {
                $div.animate({
                    width:200,

                },1000).animate({
                    height:200
                },1000)
            })
           /* * 2.移动到指定位置
            *  1）移动到(500,100)处
            *  2）移动到（100，20）处
            *  */
            $('#btn1').click(function () {
                $div.animate({
                    top:500,
                    left:100
                },1000)
            })
            $('#btn1').click(function () {
                $div.animate({
                    top:100,
                    left:20
                },1000)
            })
           /* * 3.移动指定的距离
            *  1）移动距离为(100，50)
            *  2）移动距离为(-100，-20)
            *  */
            $('#btn1').click(function () {
                $div.animate({
                    top:'+=100',
                    left:'+=20'
                },1000)
            })
            $('#btn1').click(function () {
                $div.animate({
                    top:'-=100',
                    left:'-=20'
                },1000)
            })
            //4.停止动画
            $('#btn1').click(function () {
                $div.stop()
            })
        })
    </script>

　　

二级菜单展开动画：

 

$('#nav>ul>li:has(ul)').hover(function () {
            $(this).children('ul').stop().slideDown()
        },function () {
            $(this).children('ul').stop().slideUp()
        })

 

　　

 

转载于:https://www.cnblogs.com/yangHS/p/10900964.html