jQuery事件的解绑
jQuery事件的解除绑定方法:
通过 .on() 绑定的事件的处理程序
通过 off() 方法移除该绑定
我们可以根据 on 的绑定事件的一些特性,off 方法也可以用差不多类似的方式去解除绑定或者删除该事件;
如我们绑定两个事件:
绑定事件:
$("elem") .on("mousedown mouseup",fn)
删除其中一个:
$("elem").off("mousedown")
删除所有事件:
$("elem").off("mousedown mouseup")
当然,快捷方式删除所有事件,这里不需要传递事件名了,在节点上绑定 off 就可以了:
$("elem").off()
jQuery的动画效果
一 jQuery动画的各种效果:
<style>
div{
width:200px;
height:200px;
background-color:red;
/* display:none;/*隐藏*/ /*跟fadeout起冲突*/
}
</style>
<body>
<div></div>
<button id="btn">按钮</button>
<script src="~/Content/js/jquery-3.2.1.min.js"></script>
<script>
$("#btn").click(function () {
//隐藏和显示,改变的是高度,宽度 透明度
//$("div").hide();//隐藏,瞬间改变 改变高度,宽度,透明度
// $("div").show();//显示,瞬间改变
// $("div").toggle();//切换效果,瞬间改变
//参数,缓慢,慢慢的去改变
/*参数的三种预定速度的字符串:slow、normal、fast,
还可以用表达动画时长的毫秒数值(如:1000 一千毫秒等于一秒 )来表示*/
// $("div").toggle("");
//淡入和淡出 就是改变透明度
// $("div").fadeIn(10000); //淡入,改变透明度
// $("div").fadeOut(1000); //淡出,改变透明度
// $("div").fadeToggle(2000); //动态的去改变透明度
//上卷与下拉的效果 只有高度发生变化
// $("div").slideDown(2000); //下拉
// $("div").slideUp(2000); //上卷
$("div").slideToggle(2000); //上卷和下拉都有,动态切换效果
})
</script>
如上,我把每种效果都编写出来了,还有每种效果改变的是什么,都一一注释在后面;
jQuery中淡入效果fadeTo
opacity:透明度
fadeIn; 淡入效果。内容显示,opacity从0到1
.fadeOut:淡入效果。内容显示,opacity从1到0
当我们要让元素保持动画效果,执行opacity = 0.5 的效果时,我们就用fadeTo
语法:fadeTo([speed] , opacity , [easing] ,[fn] )
fadeTo的每个参数的意义:
speed:是执行的速度,比如(一秒,十秒,几秒钟等等 ),三种预定速度之一的字符串("slow" , "normal" , "fast");
opacity:0到1之间表示透明度的数字,具体的一个值;
easing:动画的一个切换效果,用来指定切换效果,默认是"swing",可用参数"linear";
fn:在动画执行完成之后去调用的一个事件
jQuery动画中的animate语法:
.animate( properties,[duration] ,[easing] ,[complete] )
.animate( properties ,options )
.animate() 方法允许我们在任意的数值的css属性上创作动画。
porperties:一个或者多个css属性的键值对所构成的Object对象。
特别注意所有用于动画的属性必须是数字的,除非另有说明;
这些属性如果不是数字的不能使用基本的jQuery功能。
如:border,margin,padding,width,height,font,left,top,right,bottom,wordSpacing等等,
这些都是能产生动画效果的。
当然可能还有会遗漏的,不过目前我就学到这些,日后再补;