jQuery 动画

隐藏与显示

.hide() 隐藏某个元素
.hide("fast / slow") //这是一个动画设置的快捷方式，'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏

$("#a2").hide({
                duration: 3000,
                complete: function() {
                    alert('执行3000ms动画完毕')
                }
            })

注意

• jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。一旦透明度 达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局

.show() 显示(用法和 hide 类似)

注意

• show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
• 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式
• 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

.toggle() 对 hide 和 show 进行切换

如果元素是最初显示，它会被隐藏
如果隐藏的，它会显示出来

$(".test").toggle(3000) //3000毫秒隐藏 在3000毫秒显示

上卷下拉

.slideDown()：用滑动动画显示一个匹配元素

.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

$("ele").slideDown(1000, function() {
    //等待动画执行1秒后,执行别的动作....
});

注意

• 下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none
• 如 果提供回调函数参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组 动画整体才执行一次

.slideUp() 用滑动动画隐藏一个匹配元素(用法同slideDown)

注意

• 因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意

slideToggle() 用滑动动画显示/隐藏一个匹配元素

注意

• display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值
• 当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局

淡入淡出

fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeIn() 函数用于显示所有匹配的元素，并带有淡入的过渡动画效果

注意

• 淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%
• 如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见

fadeToggle() 淡入淡出的切换

fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。

.fadeTo( duration, opacity ,callback) 必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。opacity为元素透明度 , callback可以省略

$("p").fadeTo(1000, 0.9, function() {
                alert('完成')//等待1秒将透明度变成0.9,执行别的动作
            });

比较

• toggle：切换显示与隐藏效果
• sildeToggle：切换上下拉卷滚效果
• fadeToggle：切换淡入淡出效果

• toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

• slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

• 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

• 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

• 隐藏的元素不会被完全显示（不再影响页面的布局）

自定义动画

animate() 自定义动画

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

注意

• properties 一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。
  比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
• 除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏
• duration 动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。
• easing 动画运动的算法，jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件
• complete 动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

• duration - 设置动画执行的时间
• easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
• step：规定每个动画的每一步完成之后要执行的函数
• progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
• complete：动画完成回调
• 如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

.stop() 停止某个动画

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

注意

• .stop(); 停止当前动画，点击在暂停处继续开始
• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

jQuery 核心

.each() 处理对象和数组遍历

jQuery.each(array, callback )
jQuery.each( object, callback )
第一个参数传递的就是一个对象或者数组，第二个是回调函数

$.each(["1", "2","3","4"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
  //return false 停止循环
});

.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。

如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断
jQuery.inArray( value, array ,[ fromIndex ] )
用法非常简单，传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始
$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4

.trim()函数用于去除字符串两端的空白字符

注意

• 移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
• 如果这些空白字符在字符串中间时，它们将被保留，不会被移除

.get()获取一个集合对象的某个元素

.get( [index ] )

注意

• get方法是获取的dom对象，也就是通过document.getElementById获取的对象
• get方法是从0开始索引
• get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。

.index()
.index( selector )
.index( element )
传递一个 jQuery或者 dom 对象作为查找条件

• 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
• 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
• 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1