jQuery动画特效实例教程

本文以实例形式详细讲述了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) //为队列中所有未执行的动画添加延迟

转载于:https://www.cnblogs.com/zexian/p/5823315.html