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
 

转载于:https://my.oschina.net/u/3726779/blog/1572852