继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

qq_橱窗人_0
关注TA
已关注
手记 9
粉丝 33
获赞 506

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

打开App,阅读手记
13人推荐
发表评论
随时随地看视频慕课网APP