jQuery_ fade

Original link: http://www.cnblogs.com/yangHS/p/10900964.html

jQuery_ fade

Fade: changing element of transparency (opacity) to achieve

1.fadeIn (): displays animated

2.fadeOut (): animated hide

3.fadeToggle (): animated switching display / hide

 

Slide Animation: changing the width of the elements to achieve

1.slideDown (): animated expansion

2.slideUp (): shrink animated

3.slideToggle (): animated switching Expand / contract

 

Show hidden: no default animation

( Changing the transparency of the element (Opacity) to achieve / changing the width of the element is achieved )

1.show () :( not) animated show

2.hide () :( not) animated hide

3.toggle () :( not) switching animated show / hide

 

Custom Animation _ Exercise

jQuery animated nature: changing the value of the style element within the specified time to achieve

1.animate (): custom animation effects animation

2.stop (): Stop Animation

    <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>

　　

Expand secondary menu animation:

 

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

 

　　

 

Reproduced in: https: //www.cnblogs.com/yangHS/p/10900964.html