• jquery 实现动画效果(各种方法)


    1.show()和hide()和toggle()(这是show和hide的一个综合,一个按钮就实现显示和隐藏)

    效果:

    代码:

    <button type="button" class="show">普通show</button>
    <button type="button" class="show1">一秒show</button>
    <button type="button" class="hidden">普通hidden</button>
    <button type="button" class="hidden1">一秒hidden</button>
    <div id="box" style=" 100px;height: 100px;background-color: red;"></div>
    <script type="text/javascript">
        $(".show").click(function () {
            $("#box").show();
        })
        $(".show1").click(function () {
            $("#box").show(1000);
        })
        $(".hidden").click(function () {
            $("#box").hide();
        })
        $(".hidden1").click(function () {
            $("#box").hide(1000);
        })
      //还可以添加slow(200),fast(600),normal(400)三个参数,默认是400毫秒
    </script>

    实现列队动画:

    效果:

    代码:

    <style>
        div{
            background: red;
            color: #fff;
            margin-left: 5px;
            float: left;
            display: none;
        }
    </style>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <button type="button" class="show">显示列队动画</button>
    <button type="button" class="hide">隐藏列队动画</button>
    
    <script type="text/javascript">
        $(".show").click(function () {
            //列队动画,递归自调用
            $("div").first().show("fast",function testShow() {
                $(this).next().show("fast",testShow);
            })
        })
        $(".hide").click(function () {
            //列队动画,递归自调用
            $("div").last().hide("fast",function testShow() {
                $(this).prev().hide("fast",testShow);
            })
        })
    </script>

     2.滑动效果:包括slideUp()和slide()down和slideToggle()和上面实现方式一样的,效果呈现滑动效果

    3.淡入淡出:包括fadeIn()和fadeOut()和fadeToggle()和上面实现方式也是一样的,效果呈现淡入淡出

    但还有一个fadeTo('fast',0.3)   0.3是透明度

  • 相关阅读:
    luoguP4389 付公主的背包 多项式exp
    bzoj3456 城市规划 多项式求In
    luoguP4491 [HAOI2018]染色 广义容斥原理 + FFT
    计蒜之道2019复赛题解
    Educational Codeforces Round 66 (Rated for Div. 2)
    [CodeChef-ANUDTQ] Dynamic Trees and Queries
    M-SOLUTIONS Programming Contest
    Codeforces Global Round 3
    PKUSC2019题解
    [LOJ#3120][Luogu5401][CTS2019]珍珠(容斥+生成函数)
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10015416.html
Copyright © 2020-2023  润新知