jQuery动画特效实例教程

时间：2016-08-30 21:00:10 阅读：175 评论：0 收藏：0 [点我收藏+]

标签：

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

jQuery动画特效实例教程

标签：

原文地址：http://www.cnblogs.com/zexian/p/5823315.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行