jQuery效果

（一）隐藏和显示

hide（）：隐藏

$("#hide").click(function(){
    $("p").hide();
  });

show（）:显示

 $("#show").click(function(){
    $("p").show();
  });

show（）和hide（）括号中可选的参数：规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可添加函数：隐藏或显示完成后所执行的函数名称。

$(function(){
  $(".btn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("div已消失");
    });
  });
});

toggle()：隐藏和切换自动切换

$("button").click(function(){
    $("p").toggle();
  });

（二）淡入/淡出

fadeIn()：淡入

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

fadeOut():淡出

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

fadeToggle（）：淡入淡出切换

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

fadeTo（）：渐变为给定的不透明度

$(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

注意：fadeTo() 没有默认参数，必须加上 slow/fast/Time

（三）滑动

slideDown()：向下滑动

$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});

slideUp()：向上滑动

$(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});

slideToggle()：切换向上向下滑动

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

（四）动画-animate（）

操作单个属性

$(function(){
  $("button").click(function(){
    $("div").animate({left:‘250px‘});
  });
});

操作多个属性

$(function(){
  $("button").click(function(){
    $("div").animate({
      left:‘250px‘,
      opacity:‘0.5‘,
      height:‘150px‘,
      width:‘150px‘
    });
  });
});

相对于当前值变化

$(function(){
  $("button").click(function(){
    $("div").animate({
      left:‘250px‘,
      height:‘+=150px‘,
      width:‘+=150px‘
    });
  });
});

使用队列：先执行完一个样式，接着再执行一个样式

$(function(){
  $("button").click(function(){
   $("div").animate({height:‘300px‘,opacity:‘0.4‘},"slow")
.animate({width:‘300px‘,opacity:‘0.8‘},"slow")
.animate({height:‘100px‘,opacity:‘0.4‘},"slow")
.animate({width:‘100px‘,opacity:‘0.8‘},"slow")
  });
});

stop（）--停止动画

在stop（）中设置参数为true，是停止所有的动画

$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

在上述效果中有没有回调函数的区别

如以下的实例中，有回调函数时，会再隐藏效果完成后再弹出警告框

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

如以下的实例中，没有回调函数时，警告框会在隐藏效果完成前弹出

$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});

jQuery效果