JQuery---动态效果_综合

显示/隐藏

hide后面的参数是动态消失速度

  $("#test2").mouseenter(function(){
    $("#test1").hide(1000);});

动态隐藏出现完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function(){
    // $("button").click(function(){
    // $("p").hide();// });$("#test2").mouseenter(function(){
    $("#test1").hide(2000);});$("#test3").click(function(){
    $("#test1").show(2000);});});</script>	</head><body><h2>这是一个标题</h2><p>这是一个段落。</p><p>这是另一个段落。</p><div id="test1">这是一个盒子</div><button>点我</button>
<button id="test2">点我隐藏盒子</button>
<button id="test3">点我显示盒子</button></body>
</html>

淡入淡出

选择器.fadeOut//出
选择器.fadeIn、、入
$("#div2").fadeToggle("slow");//自动识别淡入还是淡出

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){
    $("#but1").click(function(){
    $("#div2").fadeOut("slow");});$("#but2").click(function(){
    $("#div2").fadeIn("slow");});});</script>	</head><body><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><button type="button" id="but1">点击淡出</button><button type="button" id="but2">点击淡入</button></body>
</html>

上滑下滑

$("#but4").click(function(){
    $("#div2").slideUp();});$("#but5").click(function(){
    $("#div2").slideDown();});

自动识别上滑下滑

 $("").slideToggle();