Query 一些简单的效果

$(selector).hide(speed,callback); 隐藏

$(selector).show(speed,callback); 显示

$(selector).toggle(speed,callback); 切换

 

 淡入

$(selector).fadeIn(speed,callback); 淡出

$(selector).fadeToggle(speed,callback); 切换

$(selector).fadeTo(speed,opacity,callback); 淡入(淡出)到(透明度)

 

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

$(selector).slideDown(speed,callback); 向上滑动

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

 

$(selector).animate({params},speed,callback); 自定义动画

实例:操作多个属性

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

  $("div").animate({

    left:'250px',

    height:'+=150px',

    width:'+=150px'

  });

});

 

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

  $("div").animate({

    height:'toggle'

  });

});

 

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

  var div=$("div");

  div.animate({left:'100px'},"slow");

  div.animate({fontSize:'3em'},"slow");

});

队列功能

$("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");

});

$(selector).stop(stopAll,goToEnd); 停止滑动

stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。)

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script> 

$(document).ready(function(){

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

    $("div").animate({left:'100px'},5000);

    $("div").animate({fontSize:'3em'},5000);

  });

  

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

    $("div").stop();

  });

 

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

    $("div").stop(true);

  });

 

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

    $("div").stop(true,true);

  });

  

});

</script> 

</head>

<body>

 

<button id="start">开始</button>

<button id="stop">停止</button>

<button id="stop2">停止所有</button>

<button id="stop3">停止但要完成</button>

<p><b>"开始"</b> 按钮会启动动画。</p>

<p><b>"停止"</b> 按钮会停止当前活动的动画,但允许已排队的动画向前执行。</p>

<p><b>"停止所有"</b> 按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</p>

<p><b>"停止但要完成"</b> 会立即完成当前活动的动画,然后停下来。</p> 

 

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

 

</body>

</html>

方法链接

$