jQuery框架之Animation(四)

一、前言

在上节课程中我们学到了jQuery的事件操作，本节我们学习jQuery的动画操作。开始我的表演。。。

二、隐藏和显示

让页面元素上看不到，我们一般会用的是css的display属性设置none或者visibility 设置为hidden。但是在jQuery中为我们设置了简便方法:

• $ele.hide(optaion)
  当提供一个参数的时候，就成了一个动画，它会匹配元素的宽度，高度，及不透明度。同时也提供了一个时间上的快捷参数fast / slow

  $(function () {
      $('#mycanvas').hide({
          duration: 1000,
          complete: function () {
              alert('执行1000ms动画');
          }
      })
      $('#mycanvas').hide();
      $('#mycanvas').hide("fast");// slow
      
  })

• $ele.show(optaion)
  这个方法与hide方法正好相反，让元素从隐藏到显示。这里不在列举代码。

注意：

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

• 隐藏显示切换toggle方法
  toggle这个方法就是用于切换显示或者隐藏匹配的元素。即如果元素最迟是隐藏的，它会被显示，否则会隐藏。hide和show，还有toggel都是修改的display属性 这个要 切记。

1. $ele.toggle()

这个方法很简单不提供参数，直接切换隐藏和显示

2. $ele.toggle(duration(ms)，complete)

 $(function () {
      $('#button').click(function () {

          $('#mycanvas').toggle(1000,function () {

          })
      })

  })

三、上卷下拉效果

1.下拉动画

• $ele.slideDown(duration,complete)
  滑动动画显示，高度从0到某个值，期间执行动画

 $("button:first").click(function() {
        $("#a1").slideDown(3000)
    });

 $("button:first").click(function() {
        $("#a1").slideDown("slow",function () {
            alert("执行完后的，回调")
        })
    });

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

2.上卷动画

• $ele.slideUp()
  这个方法就是对一个元素执行动画，让其慢慢隐藏。这个是不带参数的用法。

$("button:first").click(function() {
        $("#a1").slideUp(3000)
    });

• $ele.slideUp(dur,complete)

$("button:last").click(function() {
        $("#a2").slideUp(3000,function(){
            alert('动画执行结束')
        })
    });

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

3.下拉上卷的切换slideToggle

像hide和show一样toggel，是切换显示和隐藏的，而下拉和上卷也有自己的切换方法就是slideToggle,用法很简单，和前面方法一样，提供一个无参数，和俩个参数：一个时间和回调函数。这里不再列举具体的代码。

.slideToggle(  )
.slideToggle( [duration ] ,[ complete ] )

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

四、淡入淡出效果

1.淡出动画fadeOut

前面我们学到了让元素在页面不可见的方法，其都是修改的display:none.其实我们也可以设置元素的透明度。当透明度为0 的时候元素就看不见了，透明度的最高值为1.淡出动画就是改变了透明度，这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

• $ele.fadeOut()

  $("p").fadeOut();

• $ele.fadeout(duration,complete)

 $("p").fadeOut(2000, function() {
                alert("隐藏完毕!");
      });
 $("p").fadeOut({
                duration: 1000,
                complete: function () {
                    
                }
            });

2.淡入效果fadeIn

和fadeOut效果相反。方法也一样，这里不再列举具体代码。

• $ele.fadeIn()
  无参数
• $ele.fadeIn(duration,complete)

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

3.淡入谈出切换fadeToggle

我们前面学到了 用于切换显示和隐藏的toggle，还有控制下拉和上卷动画的slideToggle,同理 淡入和淡出的动画 也有切换方法 fadeToggle,我们所谓的切换其实就是：如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。

.fadeToggle( [duration ] ,[ complete ] )

4.淡入效果fadeTo

what？不是有淡入效果fadeIn了吗，这个是什么东东啊。前面讲的fadeOut fadeIn都是改变透明度opacity，要么是0 ，要么是1，那如果我要透明度为0.5 呢，嘿嘿 fadeTo就可以做到了。

.fadeTo( duration, opacity ,callback)
$("p").fadeTo(1000, 0.9, function() {
                alert('完成')
            });

toggle: 改变样式display为none,切换显示与隐藏效果
slideToggle: 设置位置高度为0,切换下拉和上卷的效果
fadeToggle: 设置透明度为0，切换淡入和淡出的效果

五、自定义动画animate

我们前面学到的动画，是一些简单的动画，如果我们要实现一些复杂的，就得需要anmiate。

• .animate( properties ,[ duration ], [ easing ], [ complete ] )
  properties:一个或者多个css属性的键值构成的object对象，要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

.animate({
    width: "toggle"
});

如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

.animate({ 
    left: '+=50px'
}, "slow");

easing 动画运动的算法:jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件
complete:回调动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发.

• .animate( properties ,option )
  这个方法和前面的方法类似,只是少了一些限制。传递一个对象参数，可以拿到动画执行状态一些通知:
  option:
  duration - 设置动画执行的时间
  easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
  step：规定每个动画的每一步完成之后要执行的函数
  progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
  complete：动画完成回调

$(elem).animate({   
    opacity:0
},3000)

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

• 停止动画stop
  当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止

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

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

六、jQuery的核心方法

1. each

我们知道jQuery的实例是一个元素合集，许多方法在jQuery内部都会用这个each方法进行遍历，jquery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。其用法也很简单：

• $.each(array,callback)

$(function () {
     $.each([1,2,3],function (index, value) {
         console.log(value)
return false;//停止遍历
     })
  })
输出1 2 3

• $.each(object,callback)

$(function () {
     $.each({name: "man",age: 11},function (pro, value) {
         // console.log(value) // man 11
         // console.log(pro)  // name age
     })
  })

2.查找数组中的索引inArray

jQuery.inArray()函数用于在数组这搜索指定的值，并返回其索引值，如果元素不在数组中，则返回-1.所以要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断。

• jQuery.inArray(value,array,fromIndex)

    var result =  $.inArray(4,[1,2,34,11],0);
    console.log(result);
     //-1 从索引0开始查找

   var result =  $.inArray(34,[1,2,34,11],0);
    console.log(result);// 2 从索引0开始查找

3.去除空格trim()

• jQuery.trim()
  函数用于去除字符串两端的空白字符,移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab) 如果这些空白字符在字符串中间时，它们将被保留，不会被移除

4. DOM元素的获取get方法

jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到.
get方法是获取的dom对象，也就是通过document.getElementById获取的对象
get方法是从0开始索引

     <p>1</p>
    <p>2</p>
    <p>3</p>
$(function () {
    $('p').get(2).style.color = "#eed245";
  })
最后一个元素变为黄色。

也可以传递负值，负值的话会是从后往前查找,负索引值的开始值是 -1

    <p>1</p> -3
    <p>2</p> -2
    <p>3</p> -1
$(function () {
    $('p').get(-1).style.color = "#eed245";
  })

5.DOM元素的获取index方法

这个方法其实和get方法相反，就是通过元素获取索引。就是从匹配的元素中搜索给定元素的索引值，从0开始计数。

• .index()
  无参数情况下，是获取的jQuery对象中第一个元素相对于它同辈元素的位置。

<ul>
        <a></a>   0
        <a></a>   1
        <li id="test1">1</li>  2
        <li id="test2">2</li>  3
        <li id="test3">3</li>  4
    </ul>
$("li").index()  结果为 2

• index(selector)
  如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1.

<ul>
        <a></a>   
        <a></a>   
        <li id="test1">1</li>  0 
        <li id="test2">2</li>  1
        <li id="test3">3</li>  2
    </ul>
$("li").index($('#test2').index) 选择器匹配的元素 就是所有li 元素 ，所以索引为即返回 1

• index(elemt)
  如果参数是一个dom对象或者jquery对象，index()返回值就是传入的元素相对于原先集合的索引

 <ul>
        <a></a>
        <a></a>
        <li id="test1">1</li>0
        <li id="test2">2</li>1
        <li id="test3">3</li>2
    </ul>
    <ul>
        <li id="test4">4</li>3
        <li id="test5">5</li>4
        <li id="test6">6</li>5
    </ul>
$("li").index(document.getElementById("test5"))  原先集合 为所有li的集合，所以索引值返回 4

七. 总结

学到这地方，我们基本把jQuery的常用的一些用法，熟悉了一遍，要想牢记，还得多家练习啊。正常 套路，送大家一句积极乐观的诗句吧。

志不强者智不达，言不信者行不果。据财不能以分人者，不足与友；守道不笃，遍物不博，辩是非不察者，不足与游。本不固者末必几，雄而不修者，其后必惰。原浊者流不清，行不信者名必秏。名不徒生，而誉不自长。功成名遂，名誉不可虚假，反之身者也。务言而缓行，虽辩必不听；多力而伐功，虽劳必不图。慧者心辩而不繁说，多力而不伐功，此以名誉扬天下。言无务为多而务为智，无务为文而务为察。故彼智无察，在身而惰，反其路者也。