JQuery implements hiding and displaying animation effects

JQuery implements hiding and displaying animation effects

This article shares the specific code of JQuery to achieve hiding and displaying animation effects for your reference. The specific content is as follows

Hide and Show

grammar

  • $(selector).fadeIn([speed,callback]);
  • $(selector).fadeOut([speed,callback]);
  • $(selector).fadeToggle([speed,callback]);

Parameter Description:

The optional speed parameter specifies the speed of hiding/showing and can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of a function to be executed after the hiding or showing is complete.

Implementation Code

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>Document Processing</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <style>
   div {
    background: lightblue;
    padding: 20px;
   }
   
   p {
    background: lavenderblush;
    padding: 20px;
   }
  </style>
  <script>
   $(function() {
    $("#btnHide").click(function() {
     //$("div").hide();
     //$("div").hide(2000);
     $("div").hide(2000, function() {
      alert("Hiding completed!");
     });
    });
    $("#btnShow").click(function() {
     //$("div").show();
     //$("div").show(2000);
     $("div").show(2000, function() {
      alert("Display completed!");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").toggle();
     //$("p").toggle(2000);
     $("p").toggle(2000, function() {
      alert("Switch completed!");
     });
    });
   });
  </script>
 </head>

 <body>
  <button id="btnHide">Hide-div</button>
  <button id="btnShow">Show-div</button>
  <button id="btnToggle">Switch show and hide -p</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p style="display: none;">p1</p>
  <p>p2</p>
 </body>

</html>

Effect display

Hide effect display

Display effect display

Toggle show and hide

Switched from P1 to P2

Fade in and fade out

grammar

  • $(selector).fadeIn([speed,callback]);
  • $(selector).fadeOut([speed,callback]);
  • $(selector).fadeToggle([speed,callback]);

Parameter Description:

The optional speed parameter specifies the speed of hiding/showing and can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of a function to be executed after the hiding or showing is complete.

Implementation Code

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>Effect</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <style>
   div {
    background: lightblue;
    padding: 20px;
   }
   
   p {
    background: lavenderblush;
    padding: 20px;
   }
  </style>
  <script>
   $(function() {
    $("#btnIn").click(function() {
     //$("div").fadeIn();
     //$("div").fadeIn(2000);
     $("div").fadeIn(2000, function() {
      alert("Fade in completed!");
     });
    });
    $("#btnOut").click(function() {
     //$("div").fadeOut();
     //$("div").fadeOut(2000);
     $("div").fadeOut(2000, function() {
      alert("Fade out completed!");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").fadeToggle();
     //$("p").fadeToggle(2000);
     $("p").fadeToggle(2000, function() {
      alert("Switch completed!");
     });
    });
   });
  </script>
 </head>

 <body>
  <button id="btnIn">Fade-in-div</button>
  <button id="btnOut">Fade-out-div</button>
  <button id="btnToggle">Toggle fade in and out - P</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p style="display: none;">p1</p>
  <p>p2</p>
 </body>

</html>

The effect is not much different from hiding and showing

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • 4 simple ways to show and hide with Jquery
  • Hide/show text when input box gains/loses focus (jQuery version)
  • A brief summary of several methods of displaying and hiding divs in JQuery
  • jQuery and JS to achieve the hiding and display of div
  • Several ways to control TR display and hide in jQuery
  • Three common methods of jQuery to control TR display and hide
  • jQuery effect slideToggle() method (toggle between hiding and showing)
  • jQuery method to dynamically display and hide a column in datagrid
  • jquery display hidden input object
  • Jquery click button to show and hide layer code

<<:  Briefly describe mysql monitoring group replication

>>:  Docker solves the problem that the terminal cannot input Chinese

Recommend

Installation, configuration and use of process daemon supervisor in Linux

Supervisor is a very good daemon management tool....

MySQL 8.0.12 winx64 decompression version installation graphic tutorial

Recorded the installation of mysql-8.0.12-winx64 ...

Install MySQL 5.7.17 in win10 system

Operating system win10 MySQL is the 64-bit zip de...

Several ways to add timestamps in MySQL tables

Scenario: The data in a table needs to be synchro...

Using vsftp to build an FTP server under Linux (with parameter description)

introduce This chapter mainly introduces the proc...

Using JavaScript in HTML

The <script> tag In HTML5, script has the f...

Linux file management command example analysis [display, view, statistics, etc.]

This article describes the Linux file management ...

Detailed explanation of scp and sftp commands under Linux

Table of contents Preface 1. scp usage 2. Use sft...

Multiple solutions for cross-domain reasons in web development

Table of contents Cross-domain reasons JSONP Ngin...

Let's talk about the characteristics and isolation levels of MySQL transactions

The Internet is already saturated with articles o...

How to create a MySQL database and support Chinese characters

Let's first look at the MySQL official docume...

Detailed steps for creating a Vue scaffolding project

vue scaffolding -> vue.cli Quickly create a la...

Methods to enhance access control security in Linux kernel

background Some time ago, our project team was he...

Introduction to JWT Verification Using Nginx and Lua

Table of contents Preface Lua Script nignx.conf c...

Docker file storage path, get container startup command operation

The container has already been created, how to kn...