JQuery效果

JQ效果

1.隐藏和显示的效果

$(document).ready(function(){
  $("#hide").click(function(){
    $("button").hide();
  });
  $("p").click(function(){
    $("button").show();
  });
});

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。

toggle（speed，callback）为hide（）和show（）的结合版

2.淡入和淡出

fadeIn（），fadeOut（），fadeToggle（）使用方式与参数的个数、类型与前边的两个函数一样

fadeTo(speed,0~1)淡化透明度

3.滑动的效果

slideDown("slow")（显示），slideUp（"fast"）（隐藏），slideToggle（）

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

4.动画

 　　默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

 　　如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

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

　　animate可以操作对象的多个属性：

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

　　1.opacity控制的是透明度

　　2.也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

　　3.您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

　　4.默认地，jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用:

　　

$(document).ready(function(){
  $("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");
  });
});

 

　　5.动画的清除

　　　　

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

　　两个参数默认都是false但是建议第一个参数为true比较好，因为可以把之后所有的动画都停止掉

5.CallBack函数

　　使用的话所调用的函数是在动画执行完毕再开始执行，若不使用的话，函数会在动画执行前就开始执行了。

6.链

　　通过 jQuery，可以把动作/方法链接在一起。

　　Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

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