jQuery动画特效实例教程

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程序设计有一定的借鉴价值。