JQuery fade-in and fade-out elements make their effects more vivid _ jquery

Source: Internet
Author: User
Fade out or fade in an element to achieve a more vivid effect. In any situation, the transparency of the element only changes over time to achieve a more vivid effect, you can fade out or fade in an element. In any case, the transparency of the element only changes over time. JQuery provides three functions related to fade-in and fade-out:

· FadeIn () fades a hidden element into the field of view. First, the space occupied by the elements appears on the page (which may mean that other elements on the page will be removed). Then, the elements gradually become visible. If the element is visible on the page, this function has no effect. If no speed value is provided, the element uses the "regular" setting to fade in (400 ms ).

· FadeOut () hides a visible element from sight as a ghost. If the element has been hidden on the page, this function has no effect, which is the same as the fadeIn () function. If no speed value is provided, the elements fade out at a speed of 400 milliseconds.

· FadeToggle () combines fade-in and fade-out effects. If the element is hidden, it fades out of sight. If the element is visible, it fades out of sight. You can use this function to make a prompt box appear on or disappear from the page. For example, suppose there is a button on which the word "instructions" is displayed ". When the interviewer clicks this button, a p with a description fades out of sight. If you click this button again, the description fades out of sight. To make the prompt box fade in or out every half a second, you can write the code as follows:

$('#button').click(function(){$('#instructions').fadeToggle(500);});//end click

· The working method of fadeTo () is slightly different from that of the other two effect functions. It fades the image to a certain degree of transparency. For example, the image can fade to translucent. Different from other effects, a speed value must be provided. In addition, 0 ~ A value between 1 to indicate the transparency of the element. For example, to reduce the transparency of all paragraphs to 75%, you can write the code as follows:

$('p').fadeTo('normal',.75);

This function changes the transparency of an element, whether it is visible or invisible. For example, we assume that we need to reduce the transparency of an element currently hidden to 50%. Then, if show () or fadeIn () is used to display the element, it is displayed with a 50% transparency. Similarly, if a translucent element is hidden and then displayed, its transparency settings will be restored.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.