A guide to writing animation effects in JavaScript’s jQuery library_Basics

The commonly used animation methods in jquery are hide() and show().

$(element).hide() This code can be equivalent to this element.css("display","none")

Fill in the events in hide(time) and show(time), and they can slowly disappear and appear. You can modify multiple styles, height, width, and opacity of elements.

Another set of methods fadeIn() and fadeOut() are different from hide and show in that when hide or show is used, the height of the web page will be changed, while fadeIn and fadeOut will not.

$("#panel h5.head").toggle(function(){                                                                                        $ (this).removeClass("highlight");                                                                                                                                                                                                                                                                                          .

Summary of animation methods

Animation Queue

(1) Animation effects on a set of elements.

a) When applying multiple properties in one animate() method, animations occur simultaneously.

b) When the animation method is applied in a chained manner, the animation occurs in sequence.

(2) Animation effects on multiple groups of elements

a) By default, animations all occur simultaneously.

b) When the animation method is applied in the form of callbacks, the animation occurs in the order of the callbacks.

In addition, in the animation method, be aware that other non-animation methods will jump in the queue, such as the css() method. To make these non-animation methods also execute in order, these methods need to be written in the callback function of the animation method.

Give an example of animate:

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

If you want the animation to stop, you need to insert the stop() method

before the animate() method

For example: $("#id").stop().animate() Pay attention to the two parameters in stop.

Method to determine whether an element is in animated state:

$(element).is(“:animated”);

jQuery can easily add some dynamic effects to elements on the page. You can use its built-in effects or you can define your own effects.

Here are some built-in effect methods:

• $.fn.show Show selected element
• $.fn.hide Hide the selected element
• $.fn.fadeIn fade in
• $.fn.fadeOut fadeout
• $.fn.slideDown displays elements through vertical sliding effect
• $.fn.slideUp hides elements through the vertical China effect
• $.fn.slideToggle Show or hide sliding interaction execution

A simple example:

$('h1').show();

Set the duration of the animation effect

For $.fn.show and $.fn.hide, the default duration is 0. The default duration for other effects is generally 400 milliseconds. Of course, you can also set the duration yourself:

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是内建的速度常量

jQuery’s default speed constants are located in the jQuery.fx.speeds object:

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

We can also extend this object and add our own commonly used speed values:

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

Callback function

If you want to execute some code after the animation effect ends, you can replace these animation methods with a callback function:

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

If no element is matched in the selector, the callback function will not be executed, so it is necessary to make a judgment before executing the callback function:

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

Custom animation method

The $.fn.animate method in jQuery can be used to extend our custom animation. This is mainly achieved by setting the CSS properties of elements through the animate method. When setting the CSS properties of elements, you can use absolute values ​​or relative values. Value:

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 时长
  function() { console.log('done!'); // 回调函数
});

However, when using $.fn.animate to create a custom animation effect, the color of the element cannot be changed. If you want to create color animations, you need to rely on some other color plug-ins.
Animation style

jQuery has two built-in animation styles: swing and linear

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

Control animation

jQuery provides several methods to control the execution of animation:

$.fn.stop stops the currently executing animation

$.fn.delay pauses the animation for a period of time:

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

jQuery.fx.off: Turn off the transition effect of animation, which is equivalent to setting the duration to 0.