jquery USES slideDown to implement the method of slowly pulling out the effect of a module

2020-05-19 04:14:48
OfStack

The example in this article describes how jquery USES slideDown to achieve the effect of slowly pulling out modules. Share with you for your reference. The specific analysis is as follows:

The JS code below USES buttons to slowly pull out the display in the specified area


<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideDown("slow");
 });
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>

I hope this article has been helpful to your jQuery programming.