jQuery效果笔记

显示和隐藏show与hide

$("#hide").cilck(function(){

    $("p").hide();

});

$("#show").cilck(function(){

    $("p").show();

});

缓慢显示或者隐藏的时候可以做出动画效果；

$("button").click(function(){

$("p").hide(1000);

});    //这里的单位时‘毫秒’，可以取值fast和slow或者是毫秒。

---

$("button").click(function(){

    $("p").toggle();

});

//点击隐藏，再点击显示。//同样可以控制速度

---

带有不同参数的fadeIn()方法也可以实现淡入隐藏。

$("button").click(function(){

$("div").fadeIn(/"slow"/1000);

});

淡出也是同理：fadeOut()

$("button").click(function(){

    $("div").fadeOut(/"slow"/1000);

});

发生渐变给与透明度fadeTo()；其值介于0-1之间

$("button").click(function(){

    $("div").fadeTo("slow",0.5);

});

---

显示与隐藏面板

下拉是slideDown()，上滑为slideUp()；一般我们要做就是显示和隐藏都做。

$("#flip").click(function(){ 

     $("#panel").slideToggle();

});

//点击显示，再点击隐藏，可以无限循环

---

动画属性，

$("button").click(function(){

    $("div").animate({left:'200px'});

});

除了left：‘200px'还可以继续添加需要的动画效果；用“，”分开，在同一个{}里

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'

---

停止动画，jQuery stop()方法，在动画完成之前可以停止正在进行的动画效果。包括华东，淡入淡出和自定义动画。

$("#stop").click(function(){

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

});

//在函数执行完成后再弹出提示框

$("button").click(function(){

 $("p").hide("slow",function(){

 alert("段落现在被隐藏了");

  });

});

//没有回调函数，警告框会在隐藏完成之前弹出

$("button").click(function(){ 

 $("p").hide(1000);

  alert("段落现在被隐藏了");

});

---

方法链接：$("#p1").css("color","red").slideUp(2000).slideDown(2000);

$(document).ready(function(){

  $("button").click(function(){

    $("#p1").css("color","red")

      .slideUp(2000)

      .slideDown(2000);

  });

});