Home > Developer > JavaScript
Implement the most basic fade-in and fade-out effect instance based on jQuery.
This article describes how to implement the most basic fade-in and fade-out effects based on jQuery. Share it with you for your reference. The specific analysis is as follows:
JQuery is a JavaScript library, which is an extension of JavaScript to meet various increasing special effects. The essence is JavaScript.
Next we will compile a basic JQ program to illustrate JQ.
I. Basic Objectives
There are three buttons in the webpage. One button can only hide text, and the other can only show text. The other button can hide and show text at the same time. Click Show and click hide to show the text without limit. As shown in:
Ii. Production Process
1. First, you need to download a JQ support file from the JQ official website and put it in your site folder. This supported file is jQuery1.11 (click to open the link). You can download jQuery1.11 compatible with the old browser IE6 (click to open the link) from the jQuery official website, rather than jQuery2 incompatible with the old browser ie6.
2. The entire webpage code is as follows, which is further described in parts:
Copy codeThe Code is 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "js/jquery-1.11.1.js"> </script>
<Script>
$ (Document). ready (function (){
$ ("# Hide"). click (function (){
$ ("# Text"). hide ();
});
$ ("# Show"). click (function (){
$ ("# Text"). show ();
});
$ ("# Toggle"). click (function (){
$ ("# Text"). toggle ();
});
});
</Script>
<! --
<Style type = "text/css">
# Text {
Display: none
}
</Style>
-->
<Title> fade out and display JQ </title>
</Head>
<Body>
<P id = "text">
Tossed text
</P>
<Button id = "hide">
Hide
</Button>
<Button id = "show">
Display
</Button>
<Button id = "toggle">
Hide/show
</Button>
</Body>
</Html>
(1) <body> Part
The
Copy codeThe Code is as follows: <body>
<! -- This is the text that defines a text segment with the ID as text to facilitate script control -->
<P id = "text">
Tossed text
</P>
<! -- Set the buttons with ID as hide, show, and toggle respectively -->
<Button id = "hide">
Hide
</Button>
<Button id = "show">
Display
</Button>
<Button id = "toggle">
Hide/show
</Button>
</Body>
(2) Copy codeThe Code is as follows: <! -- Code the webpage and declare to use JQ -->
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "js/jquery-1.11.1.js"> </script>
<Script>
<! -- JQ code must first use $ (document). ready (function () {}); to define a total function. Something cannot be executed after the framework provided by this function is missing -->
$ (Document). ready (function (){
<! -- Then write the required function in this function -->
<! -- Call the function for the click action of the button whose ID is hide. The subsequent actions are still placed in this function. -->
$ ("# Hide"). click (function (){
<! -- Hide text whose ID is text -->
$ ("# Text"). hide ();
});
$ ("# Show"). click (function (){
<! -- Display text whose ID is text -->
$ ("# Text"). show ();
});
$ ("# Toggle"). click (function (){
<! -- Switch the text with the ID between hide and display -->
$ ("# Text"). toggle ();
});
});
</Script>
<! -- Whether to display or not by default.
<Style type = "text/css">
# Text {
Display: none
}
</Style>
->
<Title> fade out and display JQ </title>
</Head>
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
