Usage Example of slidedown and slideup Methods in jQuery

Here, we summarize and analyze the usage of jQuery's slidedown and slideup methods with examples. Share them for everyone's reference as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown();1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp();1000);
      });
      //*****For example1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle();1000);
      //      });
      //*****For example2 Animation functions can pass callback functions, which means that this function will be executed after the animation is completed.
      $("#btnToggle").click(function () {
        $("#message").slideToggle();1000, function () {
          alert('I have completed execution!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="Expand div"> />
    <input id="btnslideUp" type="button" value="Collapse div"> />
    <input id="btnToggle" type="button" value="Toggle"> />
  </div>
  <div id="message">
    Difference between mouseover and mouseenter: div nested within div. See notes. It is related to event bubbling.<br /> 
    The mouseover event will be triggered regardless of whether the mouse pointer passes through the selected element or its child elements <br> />
    The mouseenter event will be triggered only when the mouse pointer passes through the selected element (passing through child elements will not trigger the event).
  </div>
</body>
</html>

Readers who are interested in more content related to jQuery can check the special topics on this site: 'Summary of jQuery Window Operation Techniques', 'Summary of jQuery Drag and Drop Effects and Techniques', 'Summary of jQuery Common Plugins and Usage', 'Summary of Ajax Usage in jQuery', 'Summary of jQuery Table (table) Operation Techniques', 'Summary of jQuery Extension Techniques', 'Summary of jQuery Classic Effects', 'Summary of jQuery Animation and Effects Usage', and 'Summary of jQuery Selector Usage'.

I hope the content described in this article will be helpful to everyone's jQuery programming.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial