jquery动画效果总结

一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms

二.禁用jquery的动画

将jQuery.fx.off设置为true即可

    $(".stopping").click(function(){jQuery.fx.off = true;//禁用所有jquery的动画})

三.jquery动画是异步的调用动画方法时会立刻返回,动画则在"后台"执行,也就是方法会在动画之前完成,所以可以给动画方法添加第二个参数

$("#message").fadeIn("slow",function(){$(this).text("动画执行后再修改的内容");
});

四.jquery动画还可以传入一个对象来调用动画方法

//$("#message").fadeIn({//    duration: "fast",
//    complete: function(){//    $(this).text("动画执行后再修改的内容");
//});

五.简单动画fadeIn,fadeOut,fadeTo

需要传入一个opacity目标值,fadeTo会将元素的当前opacity值变化到目标值,调用fadeTo的方法时,第一参数必须是时长(或选项对象),第二参数是opacity目标值,回调函数是可选的第三个参数

$("#message").fadeTo("0.5","0.1");

　　　　　show,hide toggle

注意:fadeOut让元素不可见,但依然保留了隐藏元素在文档中的占位

　　hide方法则会将元素从布局中移除等同于display:none一样

toggle()可以改变在上面调用它的元素的可视状态,隐藏调用show(),显示则调用hide,必须传入时长或选线对象给toggle来产生动画效果,

参数true等同show(),参数false等同hide(),如果传入两个或多个函数参数给toggle(),则会注册为事件处理程序.

　　　　slideDown(),slideUp(),slideToggle()

slideUp()会因此jquery中的元素,将其高度变化到0,再设置display的属性为none,slideToggle()来切换可见性,

$("#img").click(function(){
$("#img").slideToggle("800");
});$("#img").fadeOut().show(300).slideUp().slideToggle();
})

六.自定义动画

animate()有2个参数,

第一个是必须的,必须是一个css对象,该对象的属性指定要变化的css属性和他们的目标值.比如上面表述的slideUp()效果可以用一下代码代替

$("img").animate({height: 0px});

第二个参数是可选的,用来指定动画如何执行,可以传入一个选项对象给animate()方法

$("#btn").click(function(){$("#img").fadeIn(500).animate({"width:":"+=100"},{queue:false,duration:1000}).fadeOut(500);})

上面的fadeIn(500)和fadeOut效果是序列化的,但是animate的调用在1000毫秒内连续变化width属性是非队列化的,这段width动画和fadeIn的效果的开始时间相同,fadeOut的效果会在fadeIn效果完成时立刻开始,它不会等到width动画完成.

七.jquery缓动函数

实现方式一:

　　使用specialEasing 选项来指定自定义缓动函数

        $("#img").animate({"width":"hide","height":"hide",opacity:"hide"},{specialEasing:{width:"linear",height:"linear"}});

实现方式二:

　　在第一个对象参数中传入[目标值,缓动函数] 数组

$("#btn").click(function(){$("#img").animate({width:["hide","linear"],height:["hide","linear"],opacity:"hide"});});

八,动画的取消,延迟和队列

　　1.stop():停止选中元素上的当前正在执行的任何动画 stop():接受两个可选的布尔值参数,

　　　　如果第一个参数是true,会清除改选中元素上的动画队列:除了停止当前动画,还会取消任何等待执行的动画,第一个参数默认值是false:若忽略,等待执行的动画不会被取消.

　　　　第二个参数用来指定正在连续变化的css属性是否保留当前值,还是应该变化到最终目标值.true:变化到目标值;false:保持当前值

    $("#img").bind({mouseover:function(){$(this).stop().fadeTo(300,1.0)},mouseout:function(){$(this).stop().fadeTo(300,0.5)}});

　　2.delay(),第一参数时长,第二个参数是对列名(可选)

    $("#img").fadeTo(100,0.5).delay(200).slideUp();

在上面的列子中,添加短延迟,遮掩鼠标快速画过图片不停留时,不会有任何分神动画产生

$("#img").bind({mouseover:function(){$(this).stop(true).delay(100).fadeTo(300,1.0)},mouseout:function(){$(this).stop(true).fadeTo(300,0.5)}});

　　3.queque() 给队列追加函数

淡入显示一个元素,稍等片刻,是指一些文字,然后变化边框

$("#img").fadeIn().delay(200).queue(function(next){$(this).text("helloworld");
//    next();            //运行队列的下一项
$(this).dequeue();//用来代替next();
}).animate({height:"2px"});

　　4.clearQueue();清除追加的函数

转载于:https://www.cnblogs.com/tingbogiu/p/5535519.html

jquery动画效果总结相关推荐

js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
jQuery动画效果之上卷下拉
jQuery动画效果之上卷下拉 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Vis ...
html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...
前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
文章目录 1 JQuery动画效果 1. 基本效果 2. 滑动效果 3 淡入淡出效果 4 自定义动画 5 动画控制 6 设置 7 事件 7-1 常用事件 7-2 事件绑定 7-3 移除事件 7-4 阻 ...
JavaScript - jQuery动画效果
trigger:触发v.触发器n toggle:触发器.开关n [ jQuery动画结束时的回调函数 ] .hide(1000,function(){alert("123"); } ...
jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
jQuery动画效果animate和scrollTop结合使用实例
animate是jq的一个特效的函数方法,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态. CSS属性值是逐渐改变的,这样就可以创建动画 ...
jQuery学习笔记（三）jQuery动画效果
1.对角线动画效果:让元素在规定时间里沿着左上角来回显示和隐藏 jq对象.show() hide() toggle() 注意: 1. 括号中可以加动画时长(slow normal fast 毫秒数) ...

jquery动画效果总结

jquery动画效果总结相关推荐

最新文章

热门文章