第六章 《jQuery动画效果》

  该章节主要罗列jQuery里面的动画效果。

  1 .show([duration][,callback]);

  该方法主要用于显示对象 duration是指显示对象的执行时间(毫秒),callback是指显示完成后执行的方法

  1).show();//直接显示对象

  2).show(200,function(){alert("显示完成");});

  2.hide([duration][,callback]);

  该方法主要用于隐藏对象  参数以及使用方法与.show()一致

  3.toggle()

  切换对象显示与隐藏

  1).toggle() //切换显示与隐藏

  2).toggle(boolean)根据bool值去执行显示与隐藏 true:显示 false:隐藏

  3).toggle([duration][,callback]);

  4.fadeIn([duration][,callback]);

  淡入效果,慢慢的显示对象

  5.fadeOut([duration][,callback]);

  淡出效果,慢慢隐藏对象

  6.fadeTo(duration,opacity[,callback]);

  调整对象透明度  其中duration 是设置动画的时间,opacity是设置透明度0-1,callback是动作执行完后执行的方法

  例:

  $("#div1").fadeTo(2000,0.5,function(){alert("执行完毕");});

  7.slideDown([duration][,callback]);

  向下滑动显示出隐藏的对象

  8.slideUp([duration][,callback]);

  向上滑动隐藏对象

  9.sildeToggle([duration][,callback]);

  切换滑动显示与隐藏对象

  10.animate(properties[,duration][,easing][,callback]);

  .animate(properties,options);

  自定义动画 其中properties是一个包含CSS样式目标值的映射,duration是执行动画指定的时间,easing是值进行缓动的方式(在后面会介绍),callback是执行完动画后会调用的方法

  options是Map类型 可以给amimate方法传递 duration、easing、callback等参数

  例:

  $("#div1").animate({"68%",opacity:0.4,marginLeft:"0.6in",fonSize:"3em",borderWidth:"10px;"},1500);

  $("#div1").animate({opacity:0.25,left:"+=50",height:"toggle"},5000,function(){alert("执行完毕!");});

  注:在使用left属性时需要将对象div1进行相对或绝对定位, 这里的 toggle是指 第一次将高度 变为0  第二次将高度还原。而left会每次增加50

  11.queue()

  该方法用于管理动画队列

  1).queue([queueName]);用于获取该对象的  执行函数长度 其queueName是指队列名称的字符串

  例:

  $("#div1").slideUp().fadeIn();

  var n=$(#div1).queue("fx");//获取该对象的执行函数队列

  n.length// 2 函数长度(数量)

  $("#div1").queue("fx",[]);//清空该对象的执行函数

  $("#div1").queue(function(){ //像该对象附加一个执行函数

    $(this).toggleClass("red");

    $(this).dequeue();  //对当前匹配元素执行下一个函数,目的是为了保证函数队列可以继续移动。

  });

  12.delay()

  该方法用于延迟函数队列中的后续函数

  例:

  $("#div1").slideUp(300),delay(5000),fadeIn(400);

  13.clearQueue()

  该方法是指从函数队列中移除所有尚未执行的函数

  例:

  $("#div1").clearQueue();

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

   该方法用于停止匹配元素当前正在运行的动画

  其中:clearQueue 是一个bool值  指是否在停止动画的同时清除动画队列默认值为false不清空,jumpToEnd也是一个bool值指示是否立即完成当前动画,默认值为false

  例:

  $("#div1").stop();

  $("#div1").stop(true,true);

  15 .off属性

  off属性是全局jQuery对象的一个属性,可用与禁止所有动画。

  语法:jQuery.fx.off 该属性为bool值  若设置为true 则将立即完成所有动画到目标状态,而不会显示任何效果.

  若设置为false 则还可以重新运行动画效果.

  例:$.fx.off=true;

  

原文地址:https://www.cnblogs.com/zyj469470971/p/2485215.html