zoukankan      html  css  js  c++  java
  • jQuery中的显示与隐藏

    显示与隐藏

    <!DOCTYPE html>
    <html>
        <head>
            <script src="jquery-1.7.1/jquery.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#hide').click(function () {
                        $('p').hide()
                    })
                    $('#show').click(function () {
                        $('p').show()
                    })
                    $('#toggle').click(function () {
                        $('p').toggle()
                    })
                })
            </script>
        </head>
        <body>
            <p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
            <button id="hide" type="button">隐藏</button>
            <button id="show" type="button">显示</button>
            <button id="toggle" type="button">切换</button>
        </body>
    </html>

     淡入淡出

    • fadeIn(speed, callback)
    • fadeOut(speed, callback)
    • fadeToggle(speed, callback)
    • fadeTo(speed, opacity, callback)

    滑动效果

    $(selector).slideDown(speed,callback); // 用于display: none;向下滑动元素
    
    $(selector).slideUp(speed,callback); // 用于向上滑动隐藏元素
    
    $(selector).slideToggle(speed,callback); // 在 slideDown() 与 slideUp() 方法之间进行切换

    动画

    $(selector).animate({params},speed,callback);

    如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

    $(selector).stop(stopAll,goToEnd);

    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

    因此,默认地,stop() 会清除在被选元素上指定的当前动画。

    一个vue的UI库:https://github.com/houfee/light-ui,如果对您有帮助,请star ^-^
  • 相关阅读:
    String
    Xposed源码编译踩坑实录
    Hello 博客园
    HDU 1430 关系映射 + 打表 .
    HDU 1430 关系映射 + 打表 .
    hdu1043 经典的八数码问题 逆向bfs打表 + 逆序数
    hdu1043 经典的八数码问题 逆向bfs打表 + 逆序数
    hdu 1044 BFS(压缩图)+DFS
    hdu 1044 BFS(压缩图)+DFS
    hdu3338 最大流
  • 原文地址:https://www.cnblogs.com/houfee/p/14393476.html
Copyright © 2011-2022 走看看