JS动画

显示与隐藏

在JS动画中，show()与hide()是我们会经常用到的显示与隐藏方法。

$("#hide").click(function(){
  $("p").hide();//隐藏代码
});
 
$("#show").click(function(){
  $("p").show();//显示代码
});

通过 jQuery，您可以使用 toggle() 方法来快捷切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
  $("p").toggle();//每次单击按钮 显示以及隐藏
});

淡入与淡出

fadeIn() 与fadeout()的用法
$("btn").fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn()和fadeOut() 方法

$("button").click(function(){//淡入方法
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");//延迟600毫秒
  $("#div3").fadeIn(3000);
});
$("button").click(function(){//淡出方法
  $("#div1").fadeOut();
  $("#div2").fadeOut("fast");//延迟200毫秒
  $("#div3").fadeOut(3000);
});

可以运用 fadeToggle()方法快捷进行切换

  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });

在淡入淡出中有这一个淡化透明度方法fadeTo()
通过透明度的转变进而展现出颜色的改变
$(selector).fadeTo(speed,opacity,callback);

$("button").click(function(){//改变透明度
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

body代码块

<p>实例方法</p>
<button>点击改变</button>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

总结一下，在这些方法中,可以在后面添加函数，从而达到一些需要的满足，比如按钮的文本内容的更换，颜色背景的更换等，从而达到一些动态的效果，fadeIn添加函数的方法，在高版本中的jquery中做为事件使用的toggle(func1，func2);方法已经被弃用。只保留交替显示/隐藏的toggle()方法。toggle()相比于show()和hide()更加便捷，代码更加简洁，更加有效率，在各种动态效果中有着许多与toggle()相似的方法,在学习与工作中，可以方便学习以及使用。