JQuery learning path (4)-animation, jquery path

JQuery learning path (4)-animation, jquery path
Too many rows too many rowsIntroduction

With the basic animation method in jQuery, you can easily add wonderful visual effects to webpages and give users a new experience.

 

Animated animated jQuery

 

▓ Show () and hide () Methods

1. The show () method and the hide () method are the most basic methods in jQuery. The hide () method sets the display of an element to "none ";

2. The show () and hide () Methods change the width, height, and transparency of elements at the same time.

3. When an element uses the hide () method, the original display attribute is recorded. When the show () method is called, the element is displayed based on the display attribute value remembered by the hide () method.

4. The show () method and the hide () method both accept a parameter, indicating the speed of the motion.

1         $('.div1').toggle(function(){2             $('.div2').hide(600);3         },function(){4             $('.div2').show(600);5         });

 

▓ FadeIn () method and fadeOut () method

1. The fadeOut () method only reduces the opacity of elements within a specified period of time, while the fadeIn () method is opposite.

2. Accept a parameter

        $('.div1').toggle(function(){            $('.div2').fadeIn(600);        },function(){            $('.div2').fadeOut(600);        });

 

▓ SlideUp () method and slideDown () method

1. The slideUp () method and the slideDown () method only change the height of the element. If the value of the display attribute of an element is "none", when the slideDown () method is called, the element will be extended from top to bottom, and the slideUp () method is opposite.

2. Accept a parameter

        $('.div1').toggle(function(){            $(this).next().slideUp();        },function(){            $(this).next().slideDown();        });

 

Animation animation ()

Syntax: animate (params, speed, callback );

(1) params: Contains style attributes and value ing.

(2) speed: The speed parameter. Optional.

(3) callback: The function executed when the animation is completed. Optional.

　　　　

　　　　1. Basic usage

        $('.div1').click(function(){            $('.div2').animate({width:'+=50px',height:'300px'},600);        });

　　　　2. Multiple animations

If you want to use the chain movement, you can use the chain style.

        $('.div1').click(function(){            $('.div2').animate({width:'350px'},600)                      .animate({height:'300px'},600);        });

Note: If the css () method is used in the chained method, the css () method will not be added to the motion queue and will be executed directly without waiting for the previous animation.

        $('.div1').click(function(){            $('.div2').animate({width:'350px'},600)                      .animate({height:'300px'},600)                      .css('border','10px solid black');        });

The border of this element will be added to the element at the beginning. The solution to this problem is to use the callback function.

 

If you want to exercise at the same time, you can write the value of the motion together.

        $('.div1').click(function(){            $('.div2').animate({width:'350px',height:'300px'},600);        });

　　

Callback callback function

The callback function is applicable to all animation effects of jQuery.

For example, you can use the callback function to solve the problem that css () attributes can be directly executed in chained writing.

        $('.div1').click(function(){            $('.div2').animate({width:'350px'},600)                      .animate({height:'300px'},600,function(){                          $('.div2').css('border','10px solid black');                      });        });

 

Animated animated streams stop the animation and determine whether it is in the animation state

　　　　1. Stop the animation of the element.

The stop () method accepts two parameters.

The first parameter is true or false, indicating whether to clear the completed animation queue. For example, if the first parameter is true when we write a chained animation, after an animation operation is stopped, all subsequent animation operations will be cleared. If the parameter is false, the animation will only be blocked, the animation after the animation queue is still executed

The second parameter is true or false, indicating whether to jump the animation being executed to the final state.

 

　　　　2. determine whether an element is animated.

If you frequently execute an animation, the animation accumulation occurs. The solution is to determine whether the element is in the animation State. If the element is not in the animation state, add a new animation for the element

If (! $('Div1 '). is (': animated') {// Add an animation}

 

　　　　3. Delayed Animation

If you want to delay an animation, you can use the delay () method.

        $('.div1').click(function(){            $('.div2').animate({width:'350px'},600)                      .delay(1000)                      .animate({height:'300px'},600,function(){                          $('.div2').css('border','10px solid black');                      });        });

 

Other animation Methods

　　　1. slideToggle () method

Change the visibility of matching elements by changing the height.

        $('.div1').click(function(){            $('.div2').slideToggle();        });

　　　　2. fadeTo () method

You can adjust the opacity of an element to the specified value progressively. This animation only adjusts the opacity of the element.

        $('.div1').click(function(){            $('.div2').fadeTo(600,0.5);        });

　　　　3. fadeToggle () method

Use opacity to switch the visibility of matching elements

        $('.div1').click(function(){            $('.div2').fadeToggle(1000);        });