Usage analysis of slideUp of method in jQuery

2020-05-09 18:08:50
OfStack

This article illustrates the use of the slideUp() method in jQuery as an example. Share with you for your reference. The specific analysis is as follows:

This method hides all matched elements dynamically by varying the height (decreasing upward), and can also trigger a callback function once the hiding is complete.
The slideUp() method only adjusts the height of the element, allowing the matching element to be hidden in a "sliding" manner.

1. Grammatical structure:
This method allows you to specify the duration of the animation, or use the default value normal if there is no specified duration. Such as:

$("div").slideUp(5000)

The above code can set the animation to complete in 5000 milliseconds (5 seconds).
This method can also trigger a callback function after the animation is complete. Such as:

("div").slideUp(5000,function(){alert(' Scroll down to complete! ')});

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



<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="author" content="//www.ofstack.com/" />

<head>

<style type="text/css">

div{

  background:#060;

  width:300px;

  height:300px;

  color:red;

}

</style>

<title> The home of the script </title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){

  $("#up").click(function(){

    $("div").slideUp(5000,function(){alert(' Scroll down to complete! ')});

  })

})

</script> 

</head>

<body>

<div></div>

<button id="up"> I'm gonna click up </button>

</body>

</html>

In the above code, click the button, div will pull up slowly, and a dialog box will pop up when finished.

I hope this article has helped you with your jQuery programming.