Jquery动画知识

在这里插入图片描述

1.动画显示
$(selector).show(); 不加参数
$(selector).show(2000); 参数为执行动画时长
$(selector).show(“slow”);jQuery预设值是:slow、normal、fast
$(selector).show(2000, function() {});执行完后立即执行的回调函数

2.动画隐藏
$(selector).hide(1000); // 1000表示什么?
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();

3.动画滑入滑出

滑入
$(“div”).slideDown(); 使用默认值:400毫秒(
$(“div”).slideDown(2000);
$(“div”).slideDown(“fast”);
$(“div”).slideDown(5000,function () {
alert(1);
});
滑出
$(“div”).slideUp();
$(“div”).slideUp(2000);
$(“div”).slideUp(“fast”);
$(“div”).slideUp(5000,function () {
alert(1);
});
切换
$(“div”).slideToggle();
$(“div”).slideToggle(2000);
$(“div”).slideToggle(“fast”);
$(“div”).slideToggle(5000,function () {
alert(1);
});

4.动画淡入淡出
淡入
$(“div”).fadeIn();
$(“div”).fadeIn(2000);
$(“div”).fadeIn(“normal”);
$(“div”).fadeIn(1000,function () {});
淡出
$(“div”).fadeOut();
$(“div”).fadeOut(2000);
$(“div”).fadeOut(“normal”);
$(“div”).fadeOut(1000,function () {});

切换
$(“div”).fadeToggle();
$(“div”).fadeToggle(2000);
$(“div”).fadeToggle(“normal”);
$(“div”).fadeToggle(1000,function () {});

改变透明度到某个值
fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!
$(“div”).fadeTo(1000,.5);

5.自定义动画

var json={“width”:500,“height”:500,“left”:300,“top”:300,“border-radius”:100};
var json2={“width”:100,“height”:100,“left”:100,“top”:100,“border-radius”:100,“background-color”:“red”};
$(“div”).animate(json,1000,function () {
$(“div”).animate(json2,1000,function () {
alert(“完毕”)
});
});

$(“div”).animate({“opacity”:0},2000);
$(“div”).animate({“display”:“none”},2000);

6.停止动画
$(“button:eq(2)”).click(function () {
//立即执行完成当前动画,后续动画不执行
$(“div”).stop(true,true);
//立即停止当前动画,后续动画执行
$(“div”).stop(false,false);

        });

猜你喜欢

转载自blog.csdn.net/zuo_zuo_blog/article/details/89925293