自定义动画/** animate函数参数如下：* 1.对象类型：设置要执行动画的css属性[必填]* 1.1：jQuery动画不支持transform属性* 2.速度:执行动画所需的时间，单位毫秒[必填]* 3.执行效果：swing缓速（默认值）,linear匀速* 4.回调函数：动画执行完毕后自动调用的函数* *//** jq动画中设置的属性名要符合DOM对象属性名的设置（驼峰命名）* 例如：font-size必须写为：fontSize* */$("#d1").animate({left:"200px",opacity:".3",fontSize:"30px"},3000);队列动画

• 回调函数方式实现队列动画
• 链式编程方式实现队列动画(推荐使用)

$("#qu1").click(function () {/*使用回调函数来实现动画的队列效果*/$("div").animate({left:"200px"},1500,"swing",function () {$("div").animate({opacity:0.4},1500,"swing",function () {$("div").animate({fontSize:"50px"},2000,"swing",function () {$("div").animate({top:"200px",height:"400px",width:"400px"},2000);});});});});$("#qu2").click(function () {/*使用链式编程来实现动画的队列效果*//** delay函数用来控制等待时间，单位毫秒，delay函数也可以用在内置动画中* */$("div").animate({left:"200px"},1500).animate({opacity: 0.4},1500).delay(3000).animate({fontSize: "50px"},1500).animate({top:"200px",height:"400px",width: "400px"},2000);});等待动画

队列动画已体现效果

停止动画

stop(是否清除队列,是否立即完成当前动画);

$("#box").stop(true,true);//清除后续动画效果，当前动画效果立即完成$("#box").stop(true,false);//清除后续动画效果，当前动画效果立即停止,该 效果可省略第二个参数$("#box").stop(false,true);//后续动画会继续执行，当前动画立即完成$("#box").stop(false,false);//后续动画会继续执行，当前动画立即停止，该效果可省略两个参数jQuery插件常用插件

1. [jQueryUI] https://jqueryui.com/
2. [bootstrap] https://www.bootcss.com/
3. [easyUI] https://www.jeasyui.net/
4. [layui] https://www.layui.com/
5. [jQuery插件库] https://www.jq22.com/

自定义插件

• 静态方法设置静态方法：$.方法名=function([参数列表])；使用静态方法：$.方法名([实参列表]); (function($){
  //获取指定范围的随机数
  $.getRandom=function (min,max) {
  if(min>max){
  let temp=max;
  max=min;
  min=temp;
  } if(min==max){
  return min;
  }else{
  let r=Math.floor(Math.random()*(max-min+1)+min);
  return r;
  } } })(jQuery);
  console.log($.getRandom(5,25));
• 实例方法设置实例方法：$.fn.方法名=function([参数列表]);使用实例方法：$(selector).方法名([实参列表]);

(function($){//设置某个元素的color属性$.fn.changeColor=function (color) {this.css("color",color?color:"red");}})(jQuery);//不传参数则设置box的字体颜色为red$("#box").changeColor();//传递正确的参数则设置box的字体颜色为指定颜色$("box").changeColor("#FFF");//设置box的字体颜色为白色jQuery经典案例无缝轮播

• 页面代码

<div class="main"><div class="banner-list"><div class="banner-item"><a href=https://www.isolves.com/it/cxkf/yy/js/2021-11-12/"">