zoukankan      html  css  js  c++  java
  • jQuery(5)

    显示和隐藏

    在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

    hide()的语法形式:$(selector).hide(speed,callback);

    show()的语法形式:$(selector).show(speed,callback);

    speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast"或毫秒。 callback 参数是隐藏或显示完成后所执行的函数名称,两个参数都是可选的。

    示例如下:

    代码实现

    <script type="text/javascript">
    $(function(){
        $("#hide").click(function(){
            $("div").hide(1000);
        });
        $("#show").click(function(){
        $("div").show(1000);
        });
    });</script>
    ...省略代码
    
    <h3> 隐藏和显示</h3>
    <input type="button" id="hide" value="点击隐藏" />
    <input type="button" id="show" value="点击显示" />
    <div>hello world</div>

    淡入淡出

    在jQuery中,可以实现元素的淡入淡出效果。jQuery提供了四种fade方法:fadeIn()淡入已隐藏的元素、fadeOut()用于淡出可见的元素、fadeToggle()用于在fadeIn()和fadeOut()方法之间进行切换、fadeTo()允许渐变给定的不透明度(值介于0与1之间)

    fadeIn()语法:$(selector).fadeIn(speed,callback);

    fadeOut()语法:$(selector).fadeOut(speed,callback);

    fadeToggle()的语法:$(selector).fadeToggle(speed,callback);

    fadeTo()的语法:$(selector).fadeTo(speed,opacity,callback);

    示例如下:

    (1)描述

    在示例中我们将把fade()的四种方法分别有不同参数是进行演示。

    (2)代码实现

    <script type="text/javascript">
    $(function(){//fadeIn()方法
        $("button").click(function(){
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(3000);
        });
    })
    $(function(){//fadeOut()方法
        $("button").click(function(){
            $("#div1").fadeOut();
            $("#div2").fadeOut("slow");
            $("#div3").fadeOut(3000);
        });
    })
    $(function(){//fadeToggle()方法
        $("button").click(function(){
            $("#div1").fadeToggle();
            $("#div2").fadeToggle("slow");
            $("#div3").fadeToggle(3000);
        });
    })
    $(function(){//fadeTo()方法
        $("button").click(function(){
        $("#div1").fadeTo("slow",0.15);
        $("#div2").fadeTo("slow",0.4);
        $("#div3").fadeTo("slow",0.7);
        });
    })
    </script>
    ...省略代码
    <button>点击这里,看效果</button>
    <div id="div1" style="80px;height:80px;display:none;"></div>
    
    <div id="div2" style="80px;height:80px;display:none;"></div>
    
    <div id="div3" style="80px;height:80px;display:none;"></div>

    滑动效果

    在jQuery中,可以在元素上创建滑动效果。jQuery提供了三种fade方法 slideDown()向下滑动元素、slideUp()用于向上滑动元素、slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换。

    slideDown()语法:$(selector).slideDown(speed,callback);

    slideUp()语法:$(selector).slideUp(speed,callback);

    slideToggle()的语法:$(selector).slideToggle(speed,callback);

    参数speed规定效果的时长,可以取值:"slow"、"fast"或毫秒。callback参数是滑动完成后所执行的函数名称。

    动画效果

    在jQuery中,提供了animate()方法创建自定义的动画

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

    params为必需的参数定义形成动画的CSS属性。speed和callback是可选参数,前者规定效果的时长,取值为:"slow"、"fast"和毫秒;后者是动画完成后执行的函数名称。

    示例如下:

    (1)描述

    点击按钮看到动画效果

    (2)代码实现

    <script type="text/javascript">
    $(function(){ //增加表单中所有属性为可用的元素类别
        $("#btn").click(function(){
        $("div").animate({
            height:"200px",
             "660px"
        },"slow",function(){
            $("div").animate({
                height:"80px",
             "80px"
            },"slow")
        });
        })
    })
    </script>
    ...省略代码
    
    <h3> 动画效果</h3>
    
    <input type="button" id="btn" value="点击看效果"/>
    <div style="80px;height:80px;background-color:#FF9966"></div>

    停止效果

    在jQuery中,提供了stop()方法用于停止动画或效果,在它们完成之前。stop()方法适用于所有的jQuery效果函数,包括滑动淡入淡出和自定义动画。

    语法:$(selector).stop(stopAll,goToEnd);

    stopAll和goToEnd 参数都是可选的。前者规定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行;后者规定是否立即完成当前动画,默认是false。

    所以默认地stop()会清除在被选元素上指定的当前动画

    示例如下:

    (1)描述

    在滑动过程中点击按钮,停止滑动。

    (2)代码实现

    <script type="text/javascript">
    
    $(function(){
        $("#flip").click(function(){
        $("#panel").slideToggle(5000);
        });
        $("#stop").click(function(){
        $("#panel").stop();
        });
    })
    </script>
    ...省略代码</p>
    <h3 id="-">动画效果</h3>
    <p><button id="stop">停止滑动</button></p>
    <div id="flip">
        点击这里,向下滑动面板
    </div>
    <div id="panel">
        Hello world!
    </div>
  • 相关阅读:
    HDU 2643 Rank:第二类Stirling数
    HDU 4372 Count the Buildings:第一类Stirling数
    HDU 3625 Examining the Rooms:第一类Stirling数
    HDU 3682 To Be an Dream Architect:查重【三维坐标系中点在实数上的映射】
    POJ 3311 Hie with the Pie:TSP(旅行商)【节点可多次经过】
    bzoj 1050 旅行comf
    luogu 3958 奶酪
    luogu 3952 时间复杂度
    luogu 3951 小凯的疑惑
    bzoj 1016 最小生成树计数
  • 原文地址:https://www.cnblogs.com/hlna/p/5669878.html
Copyright © 2011-2022 走看看