jquery效果

隐藏和显示

在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

// toggle() 
$("button").click(function(){
    $("p").toggle("slow");
  });
//点击事件后触发p标签隐藏效果
$("p").click(function(){ 
  $(this).hide(); 
}); 
//点击事件后触发p标签显示效果
$("p").click(function(){ 
  $(this).show(); 
});

语法：

$(selector).hide(speed,callback); $(selector).show(speed,callback);

1. 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
2. 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

淡入淡出

在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()

1. fadeIn()淡入
   $(selector).fadeIn(speed,callback);

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

2. fadeOut()淡出
   $(selector).fadeOut(speed,callback);

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

3. fadeToggle() 淡入淡出相互转换
   $(selector).fadeToggle(speed,callback);

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

4. fadeTo()

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

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

滑动效果

1. slideDown() 向下滑动元素
   $(selector).slideDown(speed,callback);

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

2. slideUp() 向上滑动元素
   $(selector).slideUp(speed,callback);

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

3. slideToggle()
   $(selector).slideToggle(speed,callback);

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

动画效果

1. animate()
   $(selector).animate({params},speed,callback);

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

也可以定义相对值

（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

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

使用预定义的值

把属性的动画值设置为 "show"、"hide" 或 "toggle"：

  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

使用队列功能

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
}); 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

$(selector).stop(stopAll,goToEnd);

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

callback

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加 Callback 函数。

//以下实例在隐藏效果完全实现后回调函数:
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});

Chaining链式

$("#p1").css("color","red").slideUp(2000).slideDown(2000);