• jquery 动画一


    一、隐藏元素 hide()

    jQuery在做hide操作的时候,是会保存本身的元素的原始属性值,再之后通过对应的方法还原的时候还是初始值。

    比如一个元素的display属性值为inline,那么隐藏再显示时,这个元素将再次显示inline。

    一旦透明度 达到0,display样式属性将被设置为none,这个元素将不再在页面中影响布局

    <div id="a1">hide操作</div>
    <button>直接hide</button>
    <button>hide带动画</button>
     $("button:first").click(function() {
        $("#a1").hide(); // 无参
     });
    
     $("button:last").click(function() {
        $("#a1").hide({           //有参数
           duration: 3000,
           complete: function() {
               alert('执行3000ms动画完毕')
           }
        })
      });

    $("").hide(2000,function(){
       ...
    })
    $(selector).hide(speed,easing,callback) 参数可选 毫秒 ,运行曲线 ,回调函数

    二、show() 方法

    用法是hide() 类似

    show与hide方法是非常常用的,但是一般很少会基于这2个属性执行动画,大多情况下还是直接操作元素的显示与隐藏为主

    注意事项:

    • show与hide方法是修改的display属性,通过是visibility属性布局需要通过css方法单独设置
    • 如果使用!important在你的样式中,比如display: none !important,如果你希望.show()方法正常工作,必须使用.css('display', 'block !important')重写样式
    • 如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度
    $("button").click(function() {
        $("#a1").hide(3000).show(3000)
    });

    优化:
    $("button").click(function() {
        $("#a1").stop().hide(3000).show(3000); // stop()方法为被选元素停止当前正在运行的动画,防止动画运行中,用户多次点击-->形成多次触发。
    });
     

    三、显示与隐藏切换toggle方法

    这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。

    • 如果元素是最初显示,它会被隐藏
    • 如果隐藏的,它会显示出来

    display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline

     $("button:first").click(function() {
        $(".left").toggle(3000)
     });

    四、下拉显示动画slideDown

    .slideDown()方法将给匹配元素的高度的动画

     $("button:first").click(function() {
           $("#a1").slideDown(3000)
     });
    
      $("button:last").click(function() {
            $("#a2").slideDown(3000,function(){
                  alert('动画执行结束')
            })
      });
    • 下拉动画是从无到有,所以一开始元素是需要先隐藏起来的,可以设置display:none
    • 如 果提供回调函数参数,callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。
    • 这个回调函数不设置任何参数,但是 this会设成将要执行动画的那个DOM元素,如果多个元素一起做动画效果,那么要非常注意,
    • 回调函数会在每一个元素执行完动画后都执行一次,而不是这组 动画整体才执行一次

    五、上卷隐藏动画slideUp()

      用法跟slideDown() 方法类似

    六、上卷下拉切换slideToggle

    $("button").click(function() {
       $("#a1").slideToggle(500);
    });

    七、淡出动画fadeOut()

    设置元素透明度为0,可以让元素不可见,透明度的参数是0~1之间的值,通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。

    fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果

    <p style="background:blue;">淡入效果</p>
    <select id="animation">
        <option value="1">fadeOut( )</option>
        <option value="2">fadeOut( "slow" )</option>
        <option value="3">fadeOut( 3000 )</option>
        <option value="4">fadeOut( 1000, complete )</option>
        <option value="5">fadeOut( 1000, "linear" )</option>
        <option value="6">fadeOut( options )</option>
    </select>
    <input id="btnFadeOut" type="button" value="点击淡出隐藏" />
    
    
    $("#btnFadeOut").click(function() {
            var v = $("#animation").val();
            if (v == "1") {
                $("p").fadeOut();
            } else if (v == "2") {
                $("p").fadeOut("slow");
            } else if (v == "3") {
                $("p").fadeOut(3000);
            } else if (v == "4") {
                $("p").fadeOut(2000, function() {
                    alert("隐藏完毕!");
                });
            } else if (v == "5") {
                $("p").fadeOut(1000, "linear");
            } else if (v == "6") {
                $("p").fadeOut({
                    duration: 1000
                });
            }
        });

    八、淡入效果fadeIn 

    元素是隐藏的才行,用法与fadeOut()类似

    注意:

    • 淡入的动画原理:操作元素的不透明度从0%逐渐增加到100%
    • 如果元素本身是可见的,不对其作任何改变。如果元素是隐藏的,则使其可见

    九、淡入淡出切换 fadeToggle()

    fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。

    常用语法:.fadeToggle( [duration ] ,[ complete ] )

    可选的 duration 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。

    <p>测试文字淡入淡出切换效果</p>
    <select id="animation">
            <option value="1">fadeToggle( )</option>
            <option value="2">fadeToggle( "slow" )</option>
            <option value="3">fadeToggle( 3000 )</option>
            <option value="4">fadeToggle( 1000, complete )</option>
            <option value="5">fadeToggle( 1000, "linear" )</option>
            <option value="6">fadeToggle( options )</option>
    </select>
    <input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
    
     $("#btnFadeSwitch").click(function() {
            var v = $("#animation").val();
            if (v == "1") {
                $("p").fadeToggle();
            } else if (v == "2") {
                $("p").fadeToggle("slow");
            } else if (v == "3") {
                $("p").fadeToggle(3000);
            } else if (v == "4") {
                $("p").fadeToggle(1000, function() {
                    alert("切换完毕!");
                });
            } else if (v == "5") {
                $("p").fadeToggle(1000, "linear");
            } else if (v == "6") {
                $("p").fadeToggle({
                    duration: 1000
                });
            }
        });

    十、淡入效果fadeTo()

    .fadeTo( duration, opacity ,callback)

    fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

    可选的 callback 参数是该函数完成后所执行的函数名称。

    $("p").fadeTo(1000, 0.9, function() {
          alert('完成')
    });

    十一、toggle与slideToggle以及fadeToggle的比较

    操作元素的显示和隐藏可以有几种方法。
    例如:

      改变样式display为none

      设置位置高度为0

      设置透明度为0

    toggle、sildeToggle以及fadeToggle的区别:

    • toggle:切换显示与隐藏效果
    • sildeToggle:切换上下拉卷滚效果
    • fadeToggle:切换淡入淡出效果

    toggle与slideToggle细节区别:

    • toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
    • slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性

    fadeToggle方法

    • fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

    • 元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。

    • 元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。

  • 相关阅读:
    Extjs知识点汇总
    div设置滚动条内容任然显示不全
    win7 系统安装 docker
    docker常用命令
    cargo实现自动化部署远程jetty容器(非安全模式)
    win7 失去焦点解决方案
    jeecms 评论相关
    jeecms v8 网站访问量配置
    python——进程池
    python多进程编程常用到的方法
  • 原文地址:https://www.cnblogs.com/luhailin/p/6862097.html
Copyright © 2020-2023  润新知