Several animation styles built into jQuery

Using JavaScript to implement animation, the principle is very simple: we only need to modify the CSS style of the DOM element a little at a fixed time interval (for example, 0.1 seconds) each time (for example, increase the height and width by 10%). It looks like It's like animation.

But to manually implement animation effects using JavaScript requires writing very complex code. If you want to encapsulate animation effects with functions for easy reuse, there are more things to consider. This article mainly shares with you several animation styles built into jQuery.

Using jQuery to implement animation, the code cannot be simpler: only one line of code is needed!

Let us first take a look at several jQuery built-in animation styles:

show / hide

Call show() and hide( directly without parameters ), will show and hide DOM elements. However, as long as a time parameter is passed in, it becomes an animation:

var p = $('#test-show-hide');
p.hide(3000); // 在3秒钟内逐渐消失

The time is in milliseconds, but it can also be strings such as 'slow' and 'fast':

var p = $('#test-show-hide');
p.show('slow'); // 在0.6秒钟内逐渐显示

The toggle() method determines whether to show() or hide() based on the current status.

slideUp / slideDown

You may have seen that show() and hide() gradually expand or shrink from the upper left corner, while slideUp() and slideDown() Gradually expand or contract in the vertical direction.

slideUp() closes a visible DOM element, the effect is like closing a curtain, slideDown() is the opposite, and slideToggle() determines the next action based on whether the element is visible:

var p = $('#test-slide');
p.slideUp(3000); // 在3秒钟内逐渐向上消失

fadeIn / fadeOut

The animation effect of fadeIn() and fadeOut() is to fade in and out, which is achieved by continuously setting the opacity attribute of the DOM element, while fadeToggle() is determined based on whether the element is visible. Next step:

var p = $('#test-fade');
p.fadeOut('slow'); // 在0.6秒内淡出

Custom animation

If the above animation effects cannot meet your requirements, then use the last resort: animate(), which can achieve any animation effect. The parameters we need to pass in are the final CSS status and time of the DOM element. jQuery continuously adjusts the CSS within the time period until it reaches the value we set:

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

animate() can also pass in a function, When the animation ends, this function will be called:

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000, function () {
  console.log('动画已结束');
  // 恢复至初始状态:
  $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

In fact, this callback function parameter is also applicable to basic animations.

With animate(), you can achieve various custom animation effects:

animate()

Serial animation

jQuery Animation effects can also be executed serially and paused through the delay() method. In this way, we can achieve more complex animation effects, but the code is quite simple:

var p = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
p.slideDown(2000)
  .delay(1000)
  .animate({
    width: '256px',
    height: '256px'
  }, 2000)
  .delay(1000)
  .animate({
    width: '128px',
    height: '128px'
  }, 2000);
}

Because the animation needs to be executed for a period of time, so jQuery must continuously return new Promise objects to perform subsequent operations. Simply encapsulating animations in functions is not enough.

Why some animations have no effect

You may encounter that some animations such as slideUp() have no effect at all. This is because the principle of jQuery animation is to gradually change the value of CSS, such as height gradually changing from 100px to 0. But for many DOM elements that are not block, setting height on them has no effect at all, so the animation will have no effect.

In addition, jQuery does not implement the animation effect of background-color, and setting background-color with animate() has no effect. In this case, you can use CSS3 transition to achieve animation effects.

Related recommendations:

Use canvas to draw a curve animation example

JS and CSS to achieve animation effect sharing during web page loading

Sharing two methods of using jQuery to realize the animation effect of picture sliding doors

The above is the detailed content of Several animation styles built into jQuery. For more information, please follow other related articles on the PHP Chinese website!