关于jQuery动画

2020-04-10 本文已影响0人 fly_198e

jQuery动画

默认时间有'slow','fast'等。

基础

.hide([duration ] [,easing ] [,complete ])

用于隐藏元素，没有参数的时候等同于直接设置display 属性
看几个例子

$('. target').hide();
//等同于$(' .target).css( display', 'none')
  $('#book').hide(300，function() {
  alert( 'Animation complete.');
})

.show( [duration ] [, easing ] [, complete ] )

用于显示元素，用法和hide类似，在.hide()和.show()的参数设置为400时，代表有400秒的效果延时，也可以说是效果过程展示。设置一些别的参数（如：'admin'等），可以使其按照默认的时间实现展示的消失。还有一些对应时间的参数。

.toggle( [duration ] [, easing] [, complete ])

用来切换元素的隐藏、显示，类似于toggleClass ，用法和show 、hide 类似（事件处理套件也有一个名为.toggle0方法。哪一个被调用取决于传递的参数的设置）

渐变

.fadeIn()和.fadeOut是一种背景的渐隐，背景的虚化也就是由透明度1-0的过程，在不设置传参数的时候，按照默认时间渐隐到消失或渐隐出现，可以设置时间来控制该阶段的渐隐和渐显效果。

.fadeln( [duration ] [, easing ] [, complete ])

通过淡入的方式显示匹配元素，参数含义和上面相同。

.fadeOut( [duration ] [, easing ] [, complete ] )

通过淡出的方式隐藏匹配元素

.fadeTo( duration, opacity [, easing ] [, complete ])

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

$( '#book'). fadeTol('slow', 0.5, function() {
// Animation complete.
});

.fadeToggle( [duration ] [, easing ] [, complete ] )

通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none，所以元素不再影响页面的布局。

$("button:first"). click( function() {
  $("p: first"). fadeToggle("slow", "linear");
});

滑动

.slideDown()和.slideUp也是展示和隐藏的效果，不过.slideDown()和.slideUp是上拉和下拉的效果，上拉隐藏，下拉展示。

.slideDown( [duration ] [, easing ] [, complete ] )

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

$( '#book' ).slideDown( 'slow', function() {
// Animation complete.
});
.slideUp( [duration ] [, easing ] [, complete ])

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display样式属性被设置为none，以确保该元素不再影响页面布局。

$( '#book').slideUpl'slow', function() {
// An imation complete.
});
.slideToggle( [duration ] [, easing] [, complete ])

用滑动动画显示或隐藏一个匹配元索，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。dlsplay属性值保存在Query的数据缓存中，所以dleplay可以方便以后可以恢复到其初始值如果一个元素的display属性值为nline,然后是隐藏和显示，这个元素将再次显示Inline。当一个隐藏动画后，高度值达到0的时候，dlsplay 样式属性被设置为none,以确保该元素不再影响页面布局。

$( '#clickine' 1.cl1ekc function() (
  ${ '#boak'),slldeToggle('slow'，function() {
  // An1mst1on complete.
  });
});

关于上述方法的参数：

上述方法三个参数，第一位效果过程时间的设置，第二个参数是效果展示过程是否均匀的设置，第三个参数是回调函数的设置。对于后面的函数，效果展示过程和函数的执行时异步的（动画队列）。如果需要在效果展示完成之后再执行函数，则需要使用回调函数。回调函数如下：

$('#btn- box1').on('click', function(){
$(' .box')。show(1400, function(){
console. log('show' )
})
}

动画队列

关于动画队列，在执行下述例子的时候，所有的动画的方法被按顺序放入队列中，然后执行其它的效果，最后按顺序执行动画队列中的动画效果。

 $box.hide(1000, function(){
         $box.show(1000, function(){
           $box.fadeOut('slow',function(){
             $box.fadeIn('slow',function(){
               $box.slideUp(function(){
                 $box.slideDown(function(){
                   console.log('动画执行完毕')
                 })
               })
             })
           })
         })
      })//连续的动画，但是较为难看，也容易出错。

$box.hide(1000)
          .show(1000)
          .fadeOut(1000)
          .fadeIn(1000)
          .slideUp(1000)
          .slideDown(function(){
            console.log('真的完毕了');
          });
      console.log('动画完毕了吗');
    });
输出结果：先输出"动画结束了吗"，然后执行动画效果，最后输出"真的完毕了"

关于动画队列的的例子：

 <button id="btn-box1">show</button>
  <button id="btn-box2">hide</button>
  <button id="btn-box3">fadeIn</button>
  <button id="btn-box4">fadeOut</button>
  <button id="btn-box5">slideDown</button>
  <button id="btn-box6">slideUp</button>
  <button id="action"> 回调</button>
  <div class="container">
    <div class="box">
      hello
    </div>    
  </div>

  <div class="ct">
    <ul>
      <li class="item">
        <h3>标题1</h3>
        <p>内容1</p>
      </li>
      <li class="item">
        <h3>标题2</h3>
        <p>内容2</p>
      </li>
      <li class="item">
        <h3>标3</h3>
        <p>内容3</p>
      </li>
      <li class="item">
        <h3>标题4</h3>
        <p>内容4</p>
      </li>
    </ul>
  </div>


   $('#btn-box1').on('click', function(){
      $('.box').show('normal');
    });
    $('#btn-box2').on('click', function(){
      $('.box').hide('admin');
    });
    $('#btn-box3').on('click', function(){
      $('.box').fadeIn();
    });
    $('#btn-box4').on('click', function(){
      $('.box').fadeOut();
    });
    $('#btn-box5').on('click', function(){
      $('.box').slideDown();
    });
    $('#btn-box6').on('click', function(){
      $('.box').slideUp();
    });
    $('#action').on('click', function(){
      var $box = $('.box');
      /*
      $box.hide(1000, function(){
         $box.show(1000, function(){
           $box.fadeOut('slow',function(){
             $box.fadeIn('slow',function(){
               $box.slideUp(function(){
                 $box.slideDown(function(){
                   console.log('动画执行完毕')
                 })
               })
             })
           })
         })
      })//连续的动画
      */
      
      $box.hide(1000)
          .show(1000)
          .fadeOut(1000)
          .fadeIn(1000)
          .slideUp(1000)
          .slideDown(function(){
            console.log('真的完毕了');
          });
          
      console.log('动画完毕了吗');
    });

$('.ct .item').on('click', function(){
   $(this).find('p').slideDown();
   $(this).siblings().find('p').slideUp();
});
// $('.ct .item').on('mouseleave', function(){
//    $(this).find('p').slideUp(100);
// });

自定义动画

上面几个简单的动画不能满足需求的时候, jquery提供了自定义动画行为的方法

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

properties是一个CSS属性和值的对象,动画将根据这组对象移动。该方法和jQuery的.css()方法类似但是.css()方法是跳跃式的，而该方法是有一个展示的过程的也就是有个渐变的过程（渐变过程需要设置的样式本身可以渐变的也就是元素本身可渐变的，例如设置，透明度事，透明度可以由1向0渐变；而设置display为none时，是无法渐变的）。
使用该自定义动画效果时，需要遵循CSS的使用原则。

$( '#clickme'). click( function() {
  $( ' #book' ). animate({
    opacity: 0.25,//透明度变为0.25
    left: '+=50',//left在原来的基础上增加50
    height: ' toggle '//height设为toggle
  }，5000， function() {
    // Animation complete.
  });
});

第一个参数为效果的集合，第二个参数为实现效果使用的时间，第三个参数表示过程是否均匀展示，第四个参数为回调函数。

.clearQueue

清除动画队列中未执行的动画

.finish

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。

.stop( [clearQueue ] [, jumpToEnd])

停止当前正在运行的动画，根据参数展示后续效果。
1. clearQueue(default: false)//表示是否清除队列
2. jumpToEnd(default: false)//表示是否跳到动画队列最后的一个任务执行。

关于.stop()的参数：

当两个参数都为flase时：
不清除任务队列，终止当前队列跳过动画队列中间的任务直接执行队列中最后的任务。
当参数为false,true时：
跳到当前任务的最后一帧，执行动动画队列的下一个任务。
当参数为true,false时：
不清除任务队列，终止所有动画队列中的任务，动画直接停在触发该方法的地方。
当参数都为true的时：
清除任务队列，跳到当前任务最后一帧，然后停止动画。

<button id="btn1">start</button>
  <button id="btn2">step+50</button>
  <button id="btn3">step-50</button>
  <button id="btn4">auto</button>
  <button id="btn5">reset</button>
  <button id="btn6">stop(false,false)</button>
  <button id="btn7">stop(true,false)</button>
  <button id="btn8">stop(true,true)</button>
  <button id="btn9">finish</button>
  <div class="container">
    <div class="box"></div>
  </div>

.container{
  position: relative;
}
.box {
  position: absolute; 
  width: 100px;
  height: 100px;
  background: red;
  opacity: 1;
}


  
    $('#btn1').click(function(){
      $('.box').animate({
        left: '100px',
        top: 80 //可以不加引号和px
      }, 1000);
    });
    $('#btn2').click(function(){
      $('.box').animate({
        left: '+=50'
      }, 1000);
    });
    $('#btn3').click(function(){
      $('.box').animate({
        left: '-=50'
      }, 1000);
    });
    /*
    var frames = [{},{},{},{}]
    frames.forEach(frame=>{
      $('.box').animate(frame, 400)
    })
    */
    
    
    
    $('#btn4').click(function(){
      $('.box').animate({
        left: '300px'
      }, 3000);
      $('.box').animate({
        left: '300px',
        top: '300px'
      }, 3000);
      $('.box').animate({
        left: '0',
        top: '300px'
      }, 3000);
      $('.box').animate({
        left: '0',
        top: '00'
      }, 3000);
    });

    $('#btn5').click(function(){
      $('.box').animate({
        left: 0,
        top: 0
      }, 1000);
    });
    $('#btn6').click(function(){
      //停止当前动画
      $('.box').stop();
    });
    $('#btn7').click(function(){
      //停止当前动画，并清除未执行的动画队列
      $('.box').stop(true, false);
    });
    $('#btn8').click(function(){
      //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').stop(true, true);
    });
    $('#btn9').click(function(){
      //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').finish();
    });

实现跳过正在执行的任务队列，执行新的任务队列：
$(' #btn10') .click(function(){
$(' .box') . animate({
left: 100,
top: 0
}). finish() . animate({
Left: 100,
top: 300
})
})