Home > Developer > Web Develop
[JQuery] uses JQ to write the most basic fade-in and fade-out effects. jqueryjq
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. 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:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(1) <body> PartThe
<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> <! -- Respectively set the ID to hide, show, toggle button --> <button id = "hide"> hide </button> <button id = "show"> show </button> <button id = "toggle"> hide /display </button> </body>
(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> <! -- 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>
Jquery image fade-in and fade-out effectJquery.malsup.com/cycle/
To see the results of this website, you only need to use a cycle plug-in to get everything done.
The effect you need should be the most basic. This address is jquery.malsup.com/cycle/basic.html.
Right-click the source file to view all the code. Just replace your code.
Plug-in: jquery.malsup.com/cycle/download.html
Reference: jquery.malsup.com/cycle/
How can I use fadeIn () and fadeOut () in Jquery to achieve a fade-in and fade-out effect when moving the mouse up and out?There is no problem with the code, but your use is faulty:
FadeOut means to make the element transparent until the transparency is 0%, the element is displayed: none;
Therefore, the effect is completely normal.
The effect you need should be achieved using fadeTo, indicating that transparency will stop when the specified transparency is reached.
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
