jquery学习5_动画

jquery学习5_动画

常用动画

显示、隐藏

show、hide

// 参数：动画持续时间、动画完成监听
$("div").show(1000, function () {
  console.log("哈哈，动画执行完成啦");
})

滑入画出

$("div").slideDown(1000, function () {
	console.log("额呵呵");
});

$('div').slideUp();

//如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();

淡入淡出

$("div").fadeIn(2000);

$("div").fadeOut(1000);

//如果是滑入状态，就执行滑出的动画，
$('div').fadeToggle();

自定义属性动画

// 对某一个属性进行修改
// 普通动画
$("#box1").animate({left:800},8000);
// 线性动画
$("#box2").animate({left:800},8000, "linear");
// 秋千动画
$("#box3").animate({left:800},8000,"swing");

动画队列

// 在执行玩一个动画之后去执行另外一个动画
$("div").animate({left:800})
    .animate({top:400})
    .animate({width:300,height:300})
    .animate({top:0})
    .animate({left:0})
    .animate({width:100,height:100})
})

动画停止

// 停止当前正在执行的动画去开启另外一个动画
$(this).children(”ul“).stop().slideUp(4000);
 
$(this).children(”ul“).stop().slideDown(4000);

// 参数：1/clearQueue:是否清楚动画队列  2/jumpToEnd:是否跳转到当前动画的最终效果
$("div").stop(true, true);