为了账号安全,请及时绑定邮箱和手机立即绑定

jquery的知识必记点——程序员飞升上神历劫中!(动画篇)

标签:
JQuery

jquery——动画篇
1.动画的基础隐藏和显示
1)hide方法
$elem.hide()
.hide("fast / slow")
2)show()方法
$('elem').hide(3000).show(3000)
3)隐藏切换toggle方法
如果元素是最初显示,它会被隐藏
如果隐藏的,它会显示出来
2.上卷下拉效果
1)下拉动画slideDown
.slideDown( [duration ] [, complete ] )
2)上卷动画slideUp
.slideUp( [duration ] [, easing ] [, complete ] )
3)上卷下拉切换slideToggle.slideToggle( [duration ] ,[ complete ] )
4)淡出动画fadeOut
.fadeOut( [duration ], [ complete ] )
5)淡入动画fadeIn
.fadeIn( [duration ], [ complete ] )
6)淡入淡出切换fadeToggle
fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。
7)淡入效果fadeTo
fadeIn:淡入效果,内容显示,opacity是0到1
fadeOut:淡出效果,内容隐藏,opacity是1到0
3.自定义动画
1)动画animate(上)
.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )
2)动画animate(下)
.animate( properties, options )
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
3)停止动画stop
.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
stop():只会停止第一个动画,第二个第三个继续
stop(true):停止第一个、第二个和第三个动画
stop(true ture):停止动画,直接跳到第一个动画的最终状态
4.核心jquery
1)each方法
jQuery.each(array, callback )
jQuery.each( object, callback )
2)inArray
jQuery.inArray( value, array ,[ fromIndex ] )
$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4
3)trim
jQuery.trim()函数用于去除字符串两端的空白字符
移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表(tab)
如果这些空白字符在字符串中间时,它们将被保留,不会被移除
4)get(index)
.get( [index ] )
5)index
.index()
.index( selector )
.index( element )
$("li").index(document.getElementById("test2")) //结果:1
$("li").index($("#test2")) //结果:1

点击查看更多内容
13人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消