学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>jQuery>>基础教程>>

jQuery 效果- 隐藏和显示

点击:

    jQuery是一种很高效的js,它可以通过简短的代码实现非常棒的效果展示,比如隐藏和显示功能。

    一、jQuery实现隐藏和显示的方式

    1、通过jQuery的hide()方法和show()方法实现隐藏和显示

    语法:

    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);

    代码举例:

    $("#hide").click(function(){
      $("p").hide();
    });
     
    $("#show").click(function(){
      $("p").show();
    });

    通过点击id为hide的元素,可以隐藏和显示所有的p元素,您可以在本地编辑器里试一试。

    另外hide和show都是有参数可以设置的,比如说展现和隐藏速度,展现方式等。

    $("button").click(function(){
      $("p").hide(1000); //隐藏速度是1000毫秒,也就是1秒钟
    });
    其他参数可以参考相关插件,这里只是稍作介绍。

    2、通过jQuery的toggle()方法实现隐藏和显示

    语法:

    $(selector).toggle(speed,callback);
    代码举例:
    $("button").click(function(){
      $("p").toggle();
    });
    jQuery的toggle()这个方法同时实现的是显示被隐藏的元素,并隐藏已显示的元素。

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

赞一个(0)     踩一个(0)    

相关链接