jQuery学习笔记之二

1、jQuery之隐藏与显示

HTML代码

<p id="p"> hello world</p>
<button id="btn">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">显示/隐藏</button>

js代码

/**
 * 显示与隐藏
 * show  hide
 */
$(document).ready(function(){
   $("#btn").on("click",function(){
       $("p").hide(1000);  //隐藏  一秒的隐藏
   }) ;
    $("#btn2").on("click",function(){
       $("p").show(1000);   //显示  一秒的动画
    });
    $("#btn3").on("click",function(){
        $("p").toggle(1000);   //这是个开关  功能是显示/隐藏
    });
});

创建五个div标签 点击加动画隐藏

<script>
    for(var i =0;i<5;i++){
        $("<div>").appendTo(document.body);//将<div>标签添加到body标签里
    }
    $("div").on("click",function(){
       $(this).hide(1000,function(){  //一秒后隐藏并且把div这个标签移除
           $(this).remove();
       });
    });
</script>

2、jQuery之淡入淡出

HTML代码

<button id="in">淡入</button>
<button id="out">淡出</button>
<button id="toggle">开关</button>
<button id="to">设置透明度</button>

<div style="background-color: aqua"></div>
<div style="background-color: antiquewhite"></div>
<div style="background-color: blue"></div>

js代码

/**
 * 淡入淡出
 * fadeIn fadeOut fadeToggle fadeTo
 */
$(document).ready(function(){
$("#in").on("click",function(){
    $("div").fadeIn(1000);  //淡入 动画时间为一秒
});
    $("#out").on("click",function(){
        $("div").fadeOut(1000);  // 淡出 动画时间为一秒
    });
    $("#toggle").on("click",function(){
        $("div").fadeToggle(1000);  // 淡入淡出的动画
    });
    $("#to").on("click",function(){
        $("div").fadeTo(1000,0.1);  // 将div的透明度设为0.1 一秒的动画显示
    });
});

3、jQuery之滑动动画

HTML代码

<button id="down">显示</button>
<button id="up">隐藏</button>
<button id="toggle">隐藏/显示</button>

<div style="width:500px; height: 500px; background-color: aqua">

js代码

/**
 * 滑动
 * slideDown  slideUp  slideToggle
 */
$(document).ready(function(){
   $("#down").on("click",function(){
       $("div").slideDown(1000);//显示
   })
    $("#up").on("click",function(){
        $("div").slideUp(1000); //隐藏
    })
    $("#toggle").on("click",function(){
        $("div").slideToggle(1000);//开关
    })
});

4、jQuery之回调

HTML代码

<button id="btn">按钮</button>
<p> this is a callback</p>

js代码

$(document).ready(function(){
   $("#btn").on("click",function(){
      //$("p").hide(1000,function(){  //动画完毕执行的回调方法
      //    alert("动画执行完毕");
      //});
       $("p").css("color","red").slideUp(1000).slideDown(1000); //先隐藏在显示，在执行动画时文字的颜色变为红色
   });
});