jQuery animation special effects example tutorial

jQuery animation special effects example tutorial_jquery

WBOY

Release： 2016-05-16 16:38:37

Original

1278 people have browsed it

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>

Copy after login

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();
 }
  });
});

Copy after login

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();
  });
});

Copy after login

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');
  });
});

Copy after login

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'))
 });
  });
});

Copy after login

2. Make elements fade in and out

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

Copy after login

3. Slide the element up and down

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

Copy after login

4. Stop animation

stop(clearQueue, gotoEnd)

Copy after login

5. Create custom animations

animate(properties, duration, easing, callback)

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

Copy after login

If you write an extension function.

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

Copy after login

6. Customize zoom animation

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

Copy after login

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(); })
});

Copy after login

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');
});

Copy after login

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)//为队列中所有未执行的动画添加延迟

Copy after login

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