jQuery hide()使用和代码示例

hide()是jQuery中的一种内置方法, 用于隐藏所选元素。
语法如下:

$(selector).hide(duration, easing, call_function);

选择器是选定的元素。
参数:
它接受以下指定的三个参数:
  • duration:它指定隐藏效果的速度。
  • easing:它指定元素在动画的不同点的速度。
  • call_function:这是隐藏操作后要执行的回调函数。
返回值:它不返回任何值。
jQuery代码显示hide()方法的工作方式:
【jQuery hide()使用和代码示例】代码1:
在下面的代码中, 没有参数用于传递给此方法。
< html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < / script > < !-- jQuery code to show the working of this method --> < script > $(document).ready(function() { $(".b1").click(function() { $("p").hide(); }); }); < / script > < style > div { width: 50%; height: 80px; padding: 20px; margin: 10px; border: 2px solid green; font-size: 30px; }.b1 { margin: 10px; } < / style > < / head > < body > < div > < p > lsbin !.< / p > < / div > < !-- click on this button and above paragraph will disappear --> < button class = "b1" > Click me !< / button > < / body > < / html >

输出如下:
在点击"点击我!"之前按钮-
jQuery hide()使用和代码示例

文章图片
点击"点击我!"后按钮-
jQuery hide()使用和代码示例

文章图片
代码2:
在下面的代码中, 参数传递给此方法。
< html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < / script > < script > < !-- jQuery code to show the working of this method --> $(document).ready(function() { $(".btn1").click(function() { $("p").hide(1000, function() { alert("Hide() method has finished its working!"); }); }); }); < / script > < style > p { width: 40%; padding: 20px; height: 50px; border: 2px solid green; } < / style > < / head > < body > < p > lsbin.!< / p > < !-- click on this button and above paragraph will hide --> < button class = "btn1" > Click to Hide< / button > < / body > < / html >

输出如下:
在点击"点击隐藏"按钮之前,
jQuery hide()使用和代码示例

文章图片
点击"点击隐藏"按钮后,
jQuery hide()使用和代码示例

文章图片

    推荐阅读