Home > Developer > JavaScript
Use JQ to write the most basic fade-in and fade-out effects.
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.
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. The Supported file is jQuery1.11. You can download jQuery1.11 compatible with the old browser IE6 from the official jQuery website, instead of jQuery2 compatible with the old browser ie6.
2. The entire webpage code is as follows, which is further described in parts:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(1) <body> Part
The(2)
<Head> <! -- Indicates the webpage encoding and uses JQ --> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <script type =" text/javascript "src =" js/jquery-1.11.1.js "> </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 () {<! -- Text with the ID --> $ ("# text "). show () ;}); $ ("# toggle "). click (function () {<! -- Switch the text whose ID is text between hide and display -- >$ ("# text"). toggle () ;}); </script> lt ;! -- Whether or not this section of control is displayed by default <style type = "text/css"> # text {display: none} </style>-> <title> fade out and display JQ </title>
Which brother and sister can tell me how to achieve the effect of page Jump fade-in and fade-out, preferably JS, and my background is also a picture, so the whole page is required1: first, go to the next latest JQ 1.5.2 file on the Internet and include it on this page.
2: Add the following code to the page.
<Script language = "javascript" type = "text/javascript">
$ (Document). ready (function (){
$ ("Body" ).css ("display", "none ");
$ ("Body"). fadeIn (2000); // set this value as needed.
});
</Script>
IE6-8, Firefox, opera, chrome, safari all
For the question of jq image switching, if you want to change the scrolling to fade in and out, the codeI wrote a jquery plug-in for you. You need to manually load the jquery plug-in.
===================================== Js part ======================== ================
<Script>
$ (Function (){
I = 0;
N = $ (". box"). children (). length;
Time = setInterval ("xianyin ()", 10000); // sets the automatic playback time to 10 thousand milliseconds (10 seconds)
// Time = window. clearInterval (time); // clear automatic playback
})
Function xianyin (){
I = I + 1;
// Alert (I );
$ (". Box li"). hide ();
$ (". Box li: eq ("+ I + ")"). fadeIn (500); // sets the speed of transparency change to 500 milliseconds. Deleting this number indicates no transparency change.
If (I = N-1 ){
I =-1;
}
}
</Script>
===================================== Css section ====================== ================
<Style>
. Box {
Position: relative;
}
. Box> li {
Display: none;
}
</Style>
==================================== Html section ======================== ================
<Div class = "box">
<Li style = "display: block;"> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
</Div>
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
