• 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()
            })
    

      

  • 相关阅读:
    struts.custom.i18n.resources 如何配置多个资源文件?
    axis : java.lang.NoSuchMethodError
    org/apache/commons/discovery/tools/DiscoverSingleton
    java.lang.NoClassDefFoundError: javax/wsdl/OperationType
    .propertie文件注释
    数据库的名称尽量要以英文开头,如果全部输数字的话可能会出错的
    单例模式
    java异常 之 异常的层次结构
    php抓取网页
    &#39;hibernate.dialect&#39; must be set when no Connection available
  • 原文地址:https://www.cnblogs.com/yangHS/p/10900964.html
Copyright © 2020-2023  润新知