• 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是透明度

  • 相关阅读:
    测试种类
    Android ADB使用之详细篇
    Maven 生命周期
    在Eclipse中新建Maven项目
    Maven搭建环境(Linux& Windows)
    一个简单的JUnit项目
    Assertions
    Aggregating tests in suites
    Test execution order
    c#一个分页控件的例子
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10015416.html
Copyright © 2020-2023  润新知