JQuery-动画

动画

显示隐藏

// show(delay, fn)
$('div').show(1000, function(){
    // ... 动画执行完毕后的回调函数
});

$('div').hide(1000, function(){
    // ...
});

// 在显示与隐藏之间切换
$('div').toggle(1000, function(){
    // ...
});

淡入淡出

// fadeIn(delay, fn)
$('div').fadeIn(1000, function(){
    // ... 动画执行完毕后的回调函数
});

$('div').fadeOut(1000, function(){
    // ...
});

$('div').fadeToggle(1000, function(){
    // ...
});

展开收起

// slideDown(delay, fn)
$('div').slideDown(1000, function(){
    // ... 动画执行完毕后的回调函数
})；

$('div').slideUp(1000, function(){
    // ...
})

$('div').slideToggle(1000, function(){
    // ...
});

stop / delay

• stop

  // stop可以进行停止相关动画的操作
  // stop可以接受连个Boolean类型的参数，默认两个参数值都为false
  // 第一个参数用于指定 是否停止所有后续动画，第二个参数用于指定 是否立即完成当前动画
  // 建议在执行动画前先执行stop
  $('.btn').click(function(){
      $('div').stop().slideToggle(1000);
  });
  

• delay

  // delay用于告诉系统动画的执行延迟时间
  $('.btn').click(function(){
      $('div').slideToggle(1000).delay(1000).slideToggle(1000);
  });