首页 > 其他分享 >无涯教程-jQuery - Puff方法函数

无涯教程-jQuery - Puff方法函数

时间:2023-07-29 10:33:04浏览次数:50  
标签:jQuery function hide show 无涯 puff Puff 默认值

吹气效果可以与show/hide/toggle一起使用。通过按比例放大元素并同时隐藏它,可以形成粉扑效果。

Puff - 语法

selector.hide|show|toggle( "puff", {arguments}, speed );

这是所有参数的描述-

  • model                  -  效果的模式。可以是"显示(show)"或"隐藏(hide)"。默认值为hide。

  • percent(百分比) -  要缩放的百分比。默认值为150。

Puff - 示例

以下是一个简单的示例,简单说明了此效果的用法-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
		
      <script type="text/javascript" language="javascript">
   
         $(document).ready(function() {

            $("#hide").click(function(){
               $(".target").hide( "puff", { }, 2000 );
            });

            $("#show").click(function(){
               $(".target").show( "puff", {percent:100}, 2000 );
            });
				
         });
			
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
         div{ width:100px; height:100px; background:red;}
      </style>
   </head>
	
   <body>
      <p>Click on any of the buttons</p>
		
      <button id="hide"> Hide </button>
      <button id="show"> Show</button> 
  
      <div class="target">
      </div>
   </body>
</html>

这将产生以下输出-

参考链接

https://www.learnfk.com/jquery/effect-puff.html

标签:jQuery,function,hide,show,无涯,puff,Puff,默认值
From: https://blog.51cto.com/u_14033984/6890776

相关文章

  • 无涯教程-jQuery - show( )方法函数
    show()方法仅显示匹配元素中的每个元素(如果隐藏)。此方法还有另一种形式,可以控制动画的速度。show()-语法selector.show();show()-示例以下是一个简单的示例,简单说明了此方法的用法-<html><head><title>ThejQueryExample</title><scripttype=......
  • 关于Jquery jqGrid的使用
    [color=red][b]官方文档[/b][/color]:[url]http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs[/url]jqGrid使用总结[url][/url]jqGrid的属性列表:[url]http://www.helloweba.com/view-blog-162.html[/url]jqgrid的一些操作动态增加列用......
  • jquery 中全选checkbox
     JavaScript部分:functioncheckAll(obj){$("#boxinput[type='checkbox']").prop('checked',$(obj).prop('checked'));}html部分:<divid="box"><inputtype="checkbox"onclick="check......
  • jQuery 打开wode文档
    jQuery打开wode文档什么是jQuery?jQuery是一个快速、简洁、功能丰富的JavaScript库。它通过封装复杂的JavaScript代码,提供了一套简单的API来处理HTML文档操作、事件处理、动画效果、AJAX等各种常见的Web开发任务。jQuery的目标是让Web开发变得更加简单、更加高效。如何使用jQuer......
  • jquery 打印
    jQuery打印jQuery是一个快速,简洁的JavaScript库。它简化了HTML文档遍历、事件处理、动画等操作。在本文中,我们将介绍如何使用jQuery来进行打印操作。什么是打印打印是将电子文档转换为纸质文档的过程。在Web开发中,我们经常需要将网页内容打印到纸张上,以便用户可以离线阅读或保......
  • jquery 正则替换
    jQuery正则替换正则表达式(RegularExpression)是一种强大的文本处理工具,它可以用来匹配、查找和替换文本中的特定模式。在Web开发中,我们经常需要对文本进行处理和替换操作。在jQuery中,我们可以使用正则表达式进行替换操作来快速、高效地处理文本。正则表达式基础在使用正则表达式......
  • jquery 操作某个td
    如何使用jQuery操作某个td概述在本文中,我将教你如何使用jQuery来操作一个HTML表格中的某个td元素。首先,让我们了解一下整个过程。过程概览下面是一张表格,它包含了三行三列的td元素:列1列2列3行1td1td2td3行2td4td5td6行3td7td8td9我......
  • jquery 整除
    实现jQuery整除功能介绍在jQuery中,没有直接提供整除的方法,但我们可以通过一些简单的步骤来实现这个功能。在本篇文章中,我将向你介绍如何用jQuery实现整除功能,帮助你快速掌握这个技巧。实现步骤下面是实现整除功能的步骤,我们将使用jQuery的一些方法和语法来完成这个过程......
  • jquery 遍历tr
    Jquery遍历tr的实现方法作为一名经验丰富的开发者,我会教你如何使用jQuery遍历<tr>元素。在这篇文章中,我们将会使用以下步骤来实现目标:获取<table>元素遍历<tr>元素在循环中执行操作下面是每个步骤需要完成的具体操作,以及对应的代码和注释。步骤一:获取<table>元素首先,我们......
  • jquery 下拉复选
    实现jquery下拉复选的流程下面是实现jquery下拉复选的步骤:步骤操作步骤一引入jquery库和样式表步骤二创建一个下拉复选框的HTML元素步骤三初始化下拉复选框步骤四获取选中的值下面是每一步的具体操作和代码示例:步骤一:引入jquery库和样式表首先,你需要......