JQuery animation effect code sharing _java

A Show, Hide

The method shown in JQuery is:. Show () and The Hidden method is:. Hide (). In the absence of parameters, just hard to display content and hidden content.

$ ('. Show '). Click (function () {//Set a trigger event  
  $ (' #box '). Show ();     Display 
});
$ ('. Hide '). Click (function () {  //Set a trigger event  
  $ (' #box '). Hide ();     Hide
});

The. Show () and the. Hide () method can pass a parameter that controls the speed in milliseconds (1000 milliseconds equals 1 seconds). And it's rich in a constant, big, small, and transparent transformation.

$ ('. Show '). Click (function () { 
  $ (' #box '). Show (1000);    Display in 1 seconds 
}); $ ('. Hide '). Click (function () { 
  $ (' #box '). Hide (1000);    Hidden in 1 seconds 
});

In addition to controlling speed directly using milliseconds, JQuery also provides three preset speed parameter strings: slow, normal, and fast, corresponding to 600 milliseconds, 400 milliseconds, and 200 milliseconds respectively.

$ (' #box '). Show (' slow ');   600 ms 
$ (' #box '). Show (' normal ');  400 ms 
$ (' #box '). Show (' fast ');   

Note: Whether it is passing milliseconds or passing a preset string, if you accidentally pass an error or pass an empty string. Then it will take the default value: 400 milliseconds.

You can use the callback function of the. Show () and. Hide () to achieve a queue animation effect.

(1) using the function name to call itself

$ ('. Show '). Click (The function () {
  $ (' #box '). Show (' Slow ', function Showspan () {
    $ (this). Next (). Show (' Slow ', Showspan);
  })

(2) Use Arguments.callee anonymous function to call

$ ('. Show '). Click (The function () {
  $ (' #box '). Show (' Slow ', function () {
    $ (this). Next (). Show (' Slow ', Arguments.callee);
  })

When we use. Show () and. Hide (), if a button switch operation is required, some conditional judgment is required. And JQuery provides us with an independent method of similar functionality:. Toggle ().

$ ('. Toggle '). Click (function () {
  $ (this). Toggle (' slow '); 
});

Two Sliding, scrolling jQuery provides a set of ways to change the height of an element:. Slideup (),. Slidedown () and. Slidetoggle (). As the name suggests, shrink up (scroll) and expand downward (slide).

$ ('. Down '). Click (function () {  //Slide down
  $ (' #box '). Slidedown ();
$ ('. up '). Click (function () {   //Slide up
   $ (' #box '). Slideup ();
$ ('. Toggle '). Click (function () {  //Toggle
  $ (' #box '). Slidetoggle (); 

Note: The sliding, scrolling effect is the same as the display, hidden effect, with the same parameters.

Three Fade in, fade out

JQuery provides a set of methods dedicated to transparency changes:. FadeIn () and. fadeout (), respectively, indicate fade in, fade out, and of course there is a way to automatically switch:. Fadetoggle ().

$ ('. in '). Click (function () {    //Fade in
  $ (' #box '). FadeIn (' slow ');  
});
$ ('. Out '). Click (function () {    //Fade out
  $ (' #box '). fadeout (' slow '); 
});
$ ('. Toggle '). Click (function () {  //Toggle
  $ (' #box '). Fadetoggle (); 

The above three transparency methods can only be from 0 to 100, or from 100 to 0, if we want to set the specified value there is no way. and JQuery provides the. Fadeto () method to solve this problem.

$ ('. Toggle '). Click (function () { 
  $ (' #box '). Fadeto (' slow ', 0.33);   0.33 indicates a value of 33%
});

PS: Values are 0 to 1, corresponding percentages

Four Custom Animation

JQuery provides several simple and commonly used fixed animations that we use. But sometimes these simple animations don't meet our more complex needs. This time, JQuery provides a. Animate () method to create our custom
Semantic animation to meet more complex and changeable requirements.

$ ('. Animate '). Click (function () { 
  $ (' #box '). Animate ({ 
    ' width ': ' 300px ', ' 
    fontsize ': ' 50px ', 
    ' Opacity ': 0.5 
  }); 

Note: A CSS change is an animation effect, the above example, already has four CSS changes, has achieved multiple animation synchronized motion effect.

There is only one parameter that must be passed, that is, a key value to the CSS change style object. There are also two optional parameters, the speed and callback functions, respectively.

$ ('. Animate '). Click (function () {
  $ (' #box '). Animate ({
    ' width ': ' 500px ',
    ' height ': ' 400px ',
  }, 2000,function () {
    alert (' execution completed ');
  });

To the current position, we are all created in a fixed position without moving the animation. If you want to achieve motion state displacement animation, you must use a custom animation, and combined with the absolute positioning of CSS features.

$ ('. Animate '). Click (function () { 
  $ (' #box '). Animate ({ 
    ' top ': ' 300px '),   ///must first set CSS absolute positioning 
    ' left ': ' 200px ' 
  }); 

PS: must first set the reference in CSS, absolute positioning

In a custom animation, each start motion must be the initial position or the initial state, and sometimes we want to animate through the current position or state. JQuery provides the cumulative, exhausting functionality of custom animations.

$ ('. Animate '). Click (function () { 
    $ (' #box '). Animate ({left 
      : ' +=100px ',
      width: ' +=100px ',
      height: ' +=100px '
  }); 

Five Parade Animation method

Before we can implement the queue animation, if it is the same element, it can be called sequentially or consonant. If you are a different element, you can use a callback function. But sometimes there are too many queue animations, and the callback function is much less readable. To do this, JQuery provides a set of methods specifically for parade animations.

Consonant cannot implement sequential queues
$ (' #box '). Slideup (' slow '). Slidedown (' slow '). CSS (' background ', ' orange ');

Note: If the animation method, consonant can actually queue, and the. css () method is not an animation method, it will be before the first incoming queue. You can then use the callback function of the animation method to resolve it.

Using the callback function, force the. css () method to queue after. Slidedown ()
$ (' #box '). Slideup (' slow '). Slidedown (' Slow ', function ({
  $ (this)). CSS (' background ', ' orange ');              
};

But if this is the case, when there is a wide range of animations, readability not only decreases, but the original animation method is not clear enough. So, our idea is that each operation is an independent approach. Then JQuery provides a method similar to a callback function:. Queue ().

Use the. Queue () method to simulate an animation method following an animation method
$ (' #box '). Slideup (' slow '). Slidedown (' slow '). Queue (function () {
  $ (this). css (' Background ', ' orange ');
 };

Now, we want to continue to add a hidden animation after the. Queue () method, when we find that it cannot be achieved. This is caused by the. Queue () attribute. WORKAROUND: The callback function of the jquery. Queue () can pass a parameter, which is the next function, and call the next () method at the end to consonant the queue animation.

Use the next parameter to implement the continue call Queue animation $ (' #box '). Slideup (' slow '). Slidedown (' slow '). Queue (function (next{
  $ (this). CSS (' Background ', ' orange '); 
  Next (); 
}). Hide (' slow ');

The Ps:.queue () method also has a function to get the length of the current animation queue (no demo)

JQuery also provides a functional way to clean up queues:. Clearqueue (). Put it in a queued callback function or a. Queue () method to remove the remaining queues for execution.

Clears the animation queue 
$ (' #box '). Slidedown (' Slow ', function () {
  $ (this). Clearqueue ()
});

Six. Animation related Methods

Most of the time you need to stop a running animation, JQuery provides a. Stop () method. It has two optional parameters:. Stop (clearqueue,gotoend); Clearqueue passes a Boolean value that represents whether to empty an unfinished animation queue, gotoend whether to jump directly to the end of an animation that is being performed.

$ ('. Animate '). Click (function () { 
  $ (' #box '). Animate ({ 
    ' left ': ' 300px '},1000); 
  $ (' #box '). Animate ({
    ' top ': ' 300px '},1000);
  $ (' #box '). Animate ({
    ' width ': ' 300px '},1000);
  $ (' #box '). Animate ({ 
    ' height ': ' 300px '},1000);
});
  $ ('. Stop '). Click (function () {
    $ (' #box '). Stop (True,false); 
  });

Note: The first parameter indicates whether the queue animation is canceled, and the default is False. If the argument is true, the following queue animation is canceled when there is a queued animation. The second parameter indicates whether the current animation end is reached, and the default is False. If the argument is true, the end is reached immediately after the stop. You can replicate the experience yourself.

Sometimes when performing an animation or a parade animation, you need to perform a delay before the motion, and JQuery provides the. delay () method. This method can set the delay before the animation, or it can be added in the middle of the parade animation.

Start delay for 1 seconds, intermediate delay of 1 seconds 
$ ('. Animate '). Click (function () {
  $ (' #box '). Delay (1000). Animate ({ 
    ' left ': ' 300px '}, 1000); 
  $ (' #box '). Animate ({ 
    ' bottom ': ' 300px '},1000); 
  $ (' #box '). Delay (1000). Animate ({
    ' width ': ' 300px '},1000); 
  $ (' #box '). Animate ({
    ' height ': ' 300px '},1000);
  });

Arguments.callee is running in which function, it represents which function. Typically used in anonymous functions. It is sometimes necessary to call yourself in an anonymous function, but because it is an anonymous function, there is no name, and the Nameless one is adjustable. Then you can replace the anonymous function with Arguments.callee.

Recursive execution of self, infinite Loop execution
$ (' #box '). Slidetoggle (' Slow ', function () {
  $ (this). Slidetoggle (' Slow ', Arguments.callee ); 
});

The $.fx.off property can turn off all animation effects.

$.fx.off=true; Default to False

All understood.

The above is a small series to introduce the JQuery animation effect code sharing, I hope to help.