Summary of usage of slideUp(), slideDown(), hide(), show() in jQuery-JS Tutorial-php.cn

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

巴扎黑

Release： 2017-06-29 11:03:16

Original

2184 people have browsed it

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>

Copy after login

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!