search

Home >Web Front-end >JS Tutorial >Analysis on usage of slideUp() method in jQuery

Analysis on usage of slideUp() method in jQuery

巴扎黑
巴扎黑Original
2017-06-29 11:30:111465browse

This article mainly introduces the usage of the slideUp() method in jQuery, and analyzes the function, definition and specific usage techniques of the slideUp() method in the form of examples. It has certain reference value. Friends in need can refer to it

The example in this article describes the usage of the slideUp() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method dynamically hides all matching elements through height changes (decreasing upwards), and can also trigger a callback function after the hiding is completed. The
slideUp() method only adjusts the height of the element, allowing the matching element to be hidden in a "sliding" manner.

1. Syntax structure:
This method can specify the animation effect duration. If no time is specified, the default value normal will be used. For example:

The code is as follows:

$("p").slideUp(5000)

The above code can set the animation effect at 5000 milliseconds (5 seconds) Completed within.
This method can also trigger a callback function after the animation is completed. For example:

The code is as follows:

("p").slideUp(5000,function(){alert('Swipe down completed!')});

The above code can trigger the callback function after the animation is completed, so a prompt box will pop up.
2. Example code:

The code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.jb51.net/" />
<head>
<style type="text/css">
p{
  
background
:#060;
  width:300px;
  height:300px;
  color:red;
}
</style>
<title>脚本之家</title>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(
document
).ready(function(){
  $("#up").click(function(){
    $("p").slideUp(5000,function(){alert(&#39;向下滑动完成！&#39;)});
  })
})
</script> 
</head>
<body>
<p></p>
<button id="up">点击向上滑动</button>
</body>
</html>

In the above code, click the button, p will slowly pull up, and a dialog box will pop up after completion.

The above is the detailed content of Analysis on usage of slideUp() method 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：Detailed explanation of jQuery.slideUp() function usageNext article：Detailed explanation of jQuery.slideUp() function usage

Related articles

See more