zoukankan      html  css  js  c++  java
  • 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({
                        200,
                        height:200
                    },1000)
                })
                $('#btn1').click(function () {
                    $div.animate({
                        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()
            })
    

      

  • 相关阅读:
    api1
    录像时调用MediaRecorder的start()时发生start failed: -19错误
    继承AppCompatActivity的Activity隐藏标题栏
    Android 6.0 运行时权限处理完全解析
    Android开发用过的十大框架
    Lite Your Android English
    2015最流行的Android组件、工具、框架大全
    C#调用C++函数入口点的问题 z
    C#调用C++的DLL函数另一则(delegate) z
    C#调用C++编写的DLL函数, 以及各种类型的参数传递 z
  • 原文地址:https://www.cnblogs.com/yangHS/p/10900964.html
Copyright © 2011-2022 走看看