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
共同学习,写下你的评论
评论加载中...
作者其他优质文章