Usage examples of the fadein and fadeout methods in jQuery

This example explains the usage of the fadein and fadeout methods in jQuery. Shared 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 () {
      $("#btnfadeIn").click(function () {
        $("#message").fadeIn(1000);
      });
      $("#btnfadeOut").click(function () {
        $("#message").fadeOut(1000);
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnfadeIn" type="button" value="Fade in div"> />
    <input id="btnfadeOut" type="button" value="Fade out div"> />
  </div>
  <div id="message">
    Difference between mouseover and mouseenter: div inside div. See notes. It is related to event bubbling.<br /> 
    The mouseover event will be triggered whether the mouse pointer passes through the selected element or its child elements <br> The difference between mouseover and mouseenter: div inside div. See notes. It is related to event bubbling.<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 about jQuery can check the special topics on this site: 'Summary of jQuery DOM Node Operation Methods', 'Summary of jQuery Element Operation Skills', 'Summary of jQuery Common Event Usage and Skills', 'Summary of jQuery Common Plugins and Usage', 'Summary of jQuery Extension Skills', 'Summary of jQuery Table (table) Operation Skills', 'Summary of jQuery Common Classic Effects', and 'Summary of jQuery Selector Usage'.

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

Statement: 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, does not edit the content manually, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial