jQuery动画效果总结

[小菜鸟..]

jQuery动画效果总结
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：VisualStudio2015 jQuery
作者：唐文坚
撰写时间：2020年5月2日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
jQuery中的动画效果：
show(显示)：
把隐藏起来的元素显示出来。
列: $("button:first").on("click", function () {
$(".wrap").show();:括号里不传参数就是全部显示
$(".wrap").show('slow');传了参数就是显示参数里的
});
Hide（隐藏）：
把显示的元素隐藏：
列：$("button:eq(1)").on("click", function () {
$(".wrap").hide();:括号里不传参数就是全部隐藏
$(".wrap").hide(1000, 'linear');左边是时间右边是指定变化的过渡
});
$(ele).show()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作
Toggle(开关)：
$("button:last").on("click", function () {
$(".wrap").toggle();没有过渡时间
$(".wrap").toggle(2000, 'linear', function () {
alert("动画执行完毕");在开关里设置好了要过渡的
});
自定义动画：
Animation：
在这个自定义动画里像那些背景颜色的代码样式是不会显示出来的，除非是用了插件。
只有值是数字的才会显示出来并且键要用驼峰的形式写出来列：fontSize
像那些带单位的比如px的这些要用‘’写在里面的
列：.animate({
left: 50,
width: '50px'
opacity: 'show',
fontSize: "10em",
}, 500);
如果在值哪里有一个+=或者-=的话那就是目标值加上当前值或减去当前值
列：.animate({
left: '+=50px'
}, "slow"
淡入淡出的效果：
淡入淡出后不会去改变高宽只是颜色的透明度而已
淡出fadeout()
列： function fadeOutFun() {
$(".wrap").fadeOut();
}
淡入：fadein()
列：function fadeInFun() {
$(".wrap").fadeIn();
}
淡入淡出的开关：
function fadeToggleFun() {
$(".wrap").fadeToggle(1000);
}
改变透明度：
function fadeToFun() {
$(".wrap").fadeTo(1000,0.5);
}
滑动效果
slideDown（向下滑动）：
function slideDownFun()
{
$(".wrap").slideDown();
}
slideUp(向上滑动)：
function slideUpFun()
{
$(".wrap").slideUp();
$(".wrap").slideUp(1000);可以设置滑动的时间
}
滑动的开关
function slideToggleFun() {
$(".wrap").slideToggle();
}