jQuery animation special effects example tutorial_jquery

This article describes in detail the implementation method of jQuery animation special effects in the form of examples. Share it with everyone for your reference. The specific method is as follows:

1. Customized foldable content block

The content block is as follows:

<div class="module">
  <div class="caption">
    <span>标题</span>
    <img src="rollup.gif" alt="rollup" title="rolls up this module"/>
  </div>
  <div class="body">
    近日，《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武，恒大的惹不起不过尔尔，恒大失去了对其它球队压倒性的优势，能力下降是恒大霸主地位有所动摇的根源所在。
  </div>
</div> 

Bind a click event to the img element.

$(function() {
  $('div.caption img').click(function () {
 //先找到img的父级元素，再找该父级元素的子元素
 var $body = $(this).closest('div.module').find('div.body');
 if ($body.is(':hidden')) {
   $body.show();
 } else {
   $body.hide();
 }
  });
});

The operation effect is as shown below:

To switch the display state of an element, you can also use the toggle method.

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle();
  });
});

The above does not have animation effects, and sometimes it feels very abrupt. In fact, the show, hide, and toggle methods can all have animation effects. For example:

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle('slow');
  });
});

Another example:

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle('slow', function() {
   $(this).closest('div.module').toggleClass('rolledup', $(this).is(':hidden'))
 });
  });
}); 

2. Make elements fade in and out

fadeIn(speed, callback)    
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)

3. Slide the element up and down

slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)

4. Stop animation

stop(clearQueue, gotoEnd)

5. Create custom animations

animate(properties, duration, easing, callback)

$('.classname').animate({opacity:'toggle'},'slow')

If you write an extension function.

$.fn.fadeToggle = function(speed){
  return this.animate({opacity:'toggle'},'slow');
}

6. Customize zoom animation

$('.classname').each(function(){
  $(this).animate({
    width: $(this).width() * 2,
    height: $(this).height() * 2
  });
});

7. Customize falling animation

$('.classname').each(function(){
  $(this)
    .css("position","relative")
    .animate({
      opacity: 0,
      top: $(window).height() - $(this).height() - $(this).position().top
    },'slow',function(){ $(this).hide(); })
});

8. Customized dissipation animation

$('.classname').each(function(){
  var position = $(this).position();
  $(this)
    .css({
      position: 'absolute',
      top: position.top,
      left:position.left
    })
    .animate({
      opacity: 'hide',
      width: $(this).width()*5,
      height: $(this).height()*5
      top: position.top - ($(this).height() * 5 / 2),
      left: position.left - ($(this).width() * 5 /2)
    },'normal');
});

9. Animation in queue

//动画插入队列
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});

$('button').click(function(){
  $('img').dequeue('chain'); //删除队列中的动画
})

cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration, name)//为队列中所有未执行的动画添加延迟

I believe that what is described in this article has certain reference value for everyone’s jQuery programming.