jQuery事件的解绑和jQuery动画效果

                                          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等等,

这些都是能产生动画效果的。

 

当然可能还有会遗漏的,不过目前我就学到这些,日后再补;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我,休伯利安舰长

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值