Home > Article > Web Front-end > Summary of usage of slideUp(), slideDown(), hide(), show() in jQuery

Summary of usage of slideUp(), slideDown(), hide(), show() in jQuery

巴扎黑Original: 2017-06-29 11:03:162141browse

slideUp(speed,[callback])

Dynamicly hide all matching elements through height changes (decreasing upwards), optionally triggering a callback function## after hiding is completed #.

This animation effect only adjusts the height of the element and can hide the matching elements in a "sliding" manner.

slideDown(speed,[callback])

Dynamically display all matching elements through height changes (increasing downward), optionally triggering a callback function after the display is completed.

This animation effect only adjusts the height of the element, allowing the matching elements to be displayed in a "sliding" manner.

hide()

Hide The displayed elements

This is the non-animated version of 'hide(speed, [callback])'. If the selected element is hidden, this method will not change anything.

show()

Show hidden matching elements.

This is the non-animated version of 'show(speed, [callback])'. If the selected element is visible, this method will not change anything. This method will work regardless of whether the element is hidden via the hide() method or display:none; is set in CSS.

<head>
<title>slideUp()和slideDown()</title>
<style type="text/css">
<!--
body{
 background:url(bg.jpg);
}
img{
 border:1px solid #000000;
 margin:8px;
}
input{
 border:1px solid #000000;
 font-size:13px; padding:2px;
 font-family:Arial, Helvetica, sans-serif;
 background-color:#FFFFFF;
 color:#000000;
}
p{
 background-color:#FFFF00;
 height:80px; width:80px;
 border:1px solid #000000;
 float:left; margin-top:8px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 $("input:eq(0)").click(function(){
  $("p").add("img").slideUp(1000);
 });
 $("input:eq(1)").click(function(){
  $("p").add("img").slideDown(1000);
 });
 $("input:eq(2)").click(function(){
  $("p").add("img").hide(1000);
 });
 $("input:eq(3)").click(function(){
  $("p").add("img").show(1000);
 });
});
</script>
</head>
<body>
 <input type="button" value="SlideUp">
 <input type="button" value="SlideDown">
 <input type="button" value="Hide">
 <input type="button" value="Show"><br>
 <p></p><img src="test.jpg">
</body>

The above is the detailed content of Summary of usage of slideUp(), slideDown(), hide(), show() in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Three inheritance methods and their advantages and disadvantages in jsNext article：Three inheritance methods and their advantages and disadvantages in js

See more

Summary of usage of slideUp(), slideDown(), hide(), show() in jQuery

Related articles