【jQuery】动效

jQuery动效

一. jQuery显示和隐藏动画

• show(): 显示

  $('button').eq(0).click(function(){
      $('div').show(1000,function(){
          alert('显示动画完毕')
      })
  })
  

  格式：show(毫秒, fn) fn在动画执行完毕会执行
  

  ---

• hide(): 隐藏

  $('button').eq(1).click(function () {
      $('div').hide(1000, function () {
          alert('隐藏动画完毕')
      })
  })
  

  格式: hide(毫秒, fn) fn在动画执行完毕会执行
  

---

• toggle(): 切换

  $('button').eq(2).click(function () {
      $('div').toggle(1000, function () {
          alert('切换动画完毕')
      })
  })
  

  格式: toggle(毫秒, fn) fn在动画执行完毕会执行
  

  ---

二. jQuery展开和收起动画

• slideDown(): 展开

  $('button').eq(0).click(function(){
      $('div').slideDown(1000, function(){
          alert('展开完毕')
      })
  })
  

  

---

• slideUp(): 收起

  $('button').eq(1).click(function () {
      $('div').slideUp(1000, function () {
          alert('收起完毕')
      })
  })
  

  

---

• slideToggle(): 切换展开收起

  $('button').eq(2).click(function () {
      $('div').slideToggle(1000, function () {
          alert('切换完毕')
      })
  })
  

  

---

三. jQuery淡入淡出动画

• fadeIn方法: 淡入

  $('button').eq(0).click(function(){
      $('div').fadeIn(1000, function(){
          alert('淡入完毕')
      })
  })
  

---

• fadeOut方法: 淡出

  $('button').eq(1).click(function () {
      $('div').fadeOut(1000, function(){
          alert('淡出完毕')
      })
  })
  

  

---

• fadeToggle方法: 切换

  $('button').eq(2).click(function () {
      $('div').fadeToggle(1000, function(){
          alert('切换完毕')
      })
  })
  

  

---

• fadeTo方法: 淡入到指定程度

  $('button').eq(3).click(function () {
      $('div').fadeTo(1000, 0.2, function(){
          alert('已淡入到指定程度')
      })
  })
  

  

---

四. jQuery自定义动画

• anmite()方法: 设置自定义动画，可以传四个参数

  $('.one').animate({
      marginLeft : 500
  },5000,'linear',function(){
      alert('自定义动画执行完毕')
  })
  

  第一个参数: 接收一个对象，可以在对象中修改属性

  第二个参数: 指定动画时长

  第三个参数: 指定动画速度，默认swing: 慢快慢 linear: 匀速运动

  第四个参数: 动画执行完毕之后的回调函数

  • 对象中可以传多个参数，会同时执行

    $('.one').animate({
        width : 500,
        height : 500
    },1000)
    

  • 如果想分开执行可以按以下写法

    $('.one').animate({
        width: 500
    }, 1000).animate({
        height: 500
    }, 1000)
    

• 累加操作：在原有的属性上叠加

  $('.two').animate({
      width : '+=100'
  }, 1000, 'linear', function () {
      // alert('自定义动画执行完毕')
  })
  

  

• 关键字：可以设置值为关键字，如hide隐藏、toggle切换

  $('.one').animate({
      // width: "hide"
      width: "toggle"
  }, 1000, 'linear', function () {
      // alert('自定义动画执行完毕')
  })
  

  

五. jQuery的stop和delay方法

• delay()方法: 设置延迟时长

  $('.one').animate({
      width: 500
  }, 1000).delay(2000).animate({
      height: 500
  }, 1000)
  

  先宽度变，过2秒后高度变
  

• stop()方法的几种情况：

  • 立即停止当前动画，继续执行后续的动画

    $("div").stop();
    $("div").stop(false);
    $("div").stop(false, false);
    

    

  • 立即停止当前和后续所有的动画

    $("div").stop(true);
    $("div").stop(true, false);
    

    

  • 立即完成当前的，继续执行后续动画

    $("div").stop(false, true);
    

    

  • 立即完成当前的，并且停止后续所有的

    $("div").stop(true, true);
    

    

六. off和interval

• off: 打开或关闭全局动画。默认是false打开，当设为true时会关闭所有动画

  jQuery.fx.off = true;
  

• interval: 设置动画的显示帧数。默认是13. 这个值越大动画越卡，越小越流畅越站游览器性能

  jQuery.fx.interval = 100;