jQuery动画特效实例教程

Posted 2020-08-05 Guard宇

本文以实例形式详细讲述了jQuery动画特效的实现方法。

1.自制折叠内容块

内容块如下：

 

<div class="module">   <div class="caption">     <span>标题</span>     <img src="rollup.gif" alt="rollup" title="rolls up this module"/>   </div>   <div class="body">     春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点.   </div> </div>

给img元素绑定点击事件。

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

 }

  });

});

 

切换元素的显示状态，还可以用toggle方法。

$(function() {

  $(‘div.caption img‘).click(function () {

 $(this).closest(‘div.module‘).find(‘div.body‘).toggle();

  });

});

以上是没有动画效果的，有时候感觉会很唐突。实际上，show,hide,toggle方法都可以有动画效果。比如：

$(function() {

  $(‘div.caption img‘).click(function () {

 $(this).closest(‘div.module‘).find(‘div.body‘).toggle(‘slow‘);

  });

});

又比如：

$(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.使元素淡入淡出

fadeIn(speed, callback)   

fadeOut(speed, callback)

fadeTo(speed, opacity, callback)

 

3.上下滑动元素

slideDown(speed, callback)

slideUp(speed, callback)

slideToggle(speed, callback)

 

4.停止动画

stop(clearQueue, gotoEnd)

 

 

5.创建自定义动画

animate(properties, duration, easing, callback)

 

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

如果写一个扩展函数。

$.fn.fadeToggle = function(speed){

  return this.animate({opacity:‘toggle‘},‘slow‘);

}

 

6.自定义缩放动画

$(‘.classname‘).each(function(){

  $(this).animate({

    width: $(this).width() * 2,

    height: $(this).height() * 2

  });

});

 

7.自定义掉落动画

$(‘.classname‘).each(function(){

  $(this)

    .css("position","relative")

    .animate({

      opacity: 0,

      top: $(window).height() - $(this).height() - $(this).position().top

    },‘slow‘,function(){ $(this).hide(); })

});

 

8.自定义消散动画

$(‘.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.队列中的动画

//动画插入队列

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