Basic jquery tutorial (jquery fundamentals) -- (Part 6) Jquery Effect

 

 

Basic Jquery tutorial

Author: Rebecca Murphey

Original link address http://jqfundamentals.com/

With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.

Copyright 2011

 

 

 

Jquery effect Overview

Jquery makes it easy to add simple effects to the page. This effect can be achieved through built-in settings or continuous customization.

For complete details about jquery effects, visit the http://api.jquery.com/category/effects.

Built-in Effects

Most of the commonly used effects are built into jquery in the form of methods:

$. Fn. show

Show selected elements

$. Fn. hide

Hide selected elements

$. Fn. fadeIn

Gradually increase the transparency of Selected elements to 100%

$. Fn. fadeOut

Gradually increase the transparency of Selected elements to 0%

$. Fn. slideDown

Displays the selected elements in vertical sliding mode.

$. Fn. slideUp

Hide selected elements by swiping vertically

$. Fn. slideToggle

By vertical sliding, the selected elements are hidden or displayed based on whether the selected elements are visible,

Example 6.1: Basic built-in Effects

$('h1').show();

Change the duration of the built-in Effect

Except $. fn. show and $. fn. hide, the default excitation time for all built-in methods is 400 ms. Changing the effect duration is very simple.

Example 6.2: Set the effect duration

$('h1').fadeIn(300);      // fade in over 300ms$('h1').fadeOut('slow');  // using a built-in speed definition

Jquery. fx. speeds

Jquery has an object in Jquery. fx. speeds that contains the default speed, that is, settings like "slow" and "fast.

speeds: {    slow: 600,    fast: 200,    // Default speed    _default: 400}

You can override or add this object. For example, you want to change the default duration of the Effect duration, or you want to create your own Effect duration.

Example 6.3: Pass the custom speed definition through Parameters

jQuery.fx.speeds.blazing = 100;jQuery.fx.speeds.turtle = 2000;

What do I do when the effect takes effect?

You often want to execute some code after some animation takes effect-if you execute the code before the animation takes effect, it will affect the animation quality, or it will remove some elements of the animation. [Definition: a callback function provides a method to register future events that interest you.] In this case, the event we want to answer ends with the animation. Inside the callback function, the keyword "this" points to the elements that are called to produce results. As we did in the event processor function, we converted it into jquery objects through $ (this.

Example 6.4: run the code when the animation ends

$('div.old').fadeOut(300, function() { $(this).remove(); });

NOTE: If your selection result does not return any elements, your callback function will never be executed! You can solve this problem by checking whether there are elements in your selection results. If there is no problem, simply execute the callback function.

Example 6.5: execute a callback function even if no element is used to generate an animation.

var $thing = $('#nonexistent');var cb = function() {    console.log('done!');};if ($thing.length) {    $thing.fadeIn(300, cb);} else {    cb();}

Use $. fn. animate to customize the effect

Jquery uses $. fn. animate to generate any css attribute. The $. fn. animate method allows you to activate a set value or a value related to the current value.

Example 6.6: use $. fn. animate to customize the effect

$('div.funtimes').animate(    {        left : "+=50",        opacity : 0.25    },    300, // duration    function() { console.log('done!'); // calback});

Note:

Color customization cannot be generated even through $. fn. animate. Color generation can be easily implemented through the color control. We will discuss this issue in detail in the Control Section.

Easing)

[Definition: a capacity that describes the effectiveness of an effect-whether the change rate is stable or whether there is a loss in the animation duration] jquery contains two capacity Methods: swing and linear. If you want to filter your animation more naturally, you can choose from multiple plug-ins.

In jquery1.4, when you use the $. fn. animate method, you can use the pre-attribute of the tolerance.

Example 6.7: Pre-attribute

$('div.funtimes').animate(    {        left : [ "+=50", "swing" ],        opacity : [ 0.25, "linear" ]    },    300);

For more information about how to store bits, visit the http://api.jquery.com/animate.

Management results

Jquery provides several tools to manage animations.

$. Fn. stop

Blocks animations running on the selected result.

$. Fn. delay

Wait for a specific time before running the next Animation

$('h1').show(300).delay(1000).hide(300);

Jquery. fx. off

If the value is correct, the animation is not filtered; the element is immediately set to the target State. This method is useful when you handle problems with the old browser. Of course, you can also provide this method for your users.

Practice undo hidden text

Open/exercises/index.html in your browser. Use the/exercises/js/blog. js file. Your task is to add some interactivity to the blog chapter on the page. Features:

1. clicking the title in a div label (# blog) will slide vertically to display its summary section.

2. Click another title to vertically slide its summary section and hide the effect of other summary sections.

Tip: Do not forget: visible Selector

Create drop-down directory

Open/exercises/index.html in your browser. Use the/exercises/js/navigation. js file. Your task is to add a drop-down directory,

1. When the mouse slides over a entry, its sub-directory entries are displayed in the main directory.

2. Exit the main directory to hide all its subdirectories.

To complete this task, you can use the $. fn. hover method to add or remove classes from sub-directory entries to control whether the class is displayed or hidden. (/Exercises/scc/styles.css Contains classes that provide hover for this effect)

Create a slide show

Open/exercises/index.html in your browser. Use the/exercises/js/slideshow. js file. Your task is to create a common html page and add a slide show through javascript to enrich it.

1. Move the # slideshow element to the top of the body.

2. Write the list entries in the repeating element of the Code. Fade in one entry, display for several seconds, fade out, and then fade in the next entry ...... This loop.

3. When you cycle to the end of the list, execute the task from the beginning.

To further challenge, create a navigation bar under the slide to display the number of images and the images being viewed. (Note: $. fn. prevAll will be helpful for this challenge)