web技术学习

Appearance

此页目录
本文总阅读量 次

jQuery 动画 ​

显示隐藏 ​

js
show（
  duration 动画执行时间-毫秒，
  easing 运动效果（只有两种 swing慢快慢，linear匀速，complate运动执行完成后的回调）
）

隐藏 hide() 显示隐藏的切换 toggle()

js
$('#box').show(1000,function(){
  alert('执行完毕');
})

淡入淡出 ​

淡入fadeIn()

淡出 fadeOut()

透明度变化到 fadeTo()

淡入淡出切换 fadeToggle()

js
$('button').eq(0).on('click', function(){
  $('#box').fadeIn(1000);
})

$('button').eq(2).on('click', function(){
  $('#box').fadeTo(1000, .5);
})

下拉显示 ​

下拉显示slideDown()

上拉隐藏 slideUp()

切换 slideToggle()

js
$('button').eq(2).on('click', function(){
  $('#box').slideToggle(1000);
})

animate ​

animate({属性1：目标值1，属性2：目标值2.。。}, duration动画持续时间，easing动画效果，callback回调)

js
// 累加
$('button').click(function(){
  $('#box').animate({width:'+=50'},200)
})

// 链式运动
$('button').click(function(){
  $('#box').animate({width:500},1000)
​        .animate({height:300},500)
​        .animate({opacity:.5},500)
})

动画队列 ​

js
queue(function(next){})
// 将其他的操作加入到动画队列中 按顺序来完成

$('#box').animate({width:500},1000)
​    .queue(function(next){
​      $(this).css({background:'blue'});
​      next();// 继续执行后续的动画队列中的操作
​    })
​    .animate({height:300},500);

判断是否处于动画状态 ​

$(元素).is(':animated'): 有动画在执行 返回 true 没有返回 false

js
$('#box').hover(function(){
  if(!$(this).is(':animated')){
​    $(this).animate({height:300},400);
  }
}, function(){
  $(this).animate({height:50},400);
})

延迟动画 ​

js
$('#box').animate({width:500},1000)
​    .delay(2000)
​    .animate({height:300},500);

停止动画 ​

stop（clearQueue清除动画队列， gotoEnd达到动画最终状态）停止动画 finish（）完成动画---所有动画队列的效果达到最终状态（2.x以上版本支持）

js
// stop停止动画的几种组合
$('button').eq(1).click(function(){
  // 参数皆为false 不清除动画队列 不达到最终状态
  $('#box').stop(false, false); // 默认
  // 参数皆为true 清除动画队列 达到最终状态
  $('#box').stop(true, true);
  // true false 清除动画队列 不达到最终状态
  $('#box').stop(true, false);
  // false true 不清除动画队列 达到最终状态
  $('#box').stop(false, true);
})

// finish
$('button').eq(2).click(function(){
  $('#box').finish();
})

评论

交流群