8. 内置动画

8.1 hide() 隐藏

$(selector*).hide(*speed,callback);可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

隐藏动作设置时间,

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

隐藏元素后,添加回调函数

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

8.2 show() 显示元素

$(selector*).show(*speed,callback); 可以使用 show() 方法来显示 HTML 元素：

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

用法与上面得hide()一样

8.3 toggle()

您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

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

$(selector*).toggle(*speed,callback); 可以使用来切换show和hide

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

8.4 动画隐藏元素和显示

8.4.1 fedeln() :用于淡入已隐藏的元素。

$(selector*).fadeIn(*speed,callback);

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>

8.4.2 fadeOut() 用于隐藏元素

$(selector*).fadeOut(*speed,callback );

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

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

8.4.3 fadeToggle() 方法

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

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

8.4.4 fadeTo() 方法

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

jQuery fadeTo() 方法允许渐变为给定的不透明度,必需的 speed 参数规定效果的时长。

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

注意: 注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。

​ fadeTo() 没有默认参数，必须加上 slow/fast/Time ;

8.5 自定义动画 animate()

$(selector).animate({样式},time);

单个变化

$(selector).animate({

width:200,height:200px

},time);

使用相对值,在原本得值上修改

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

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

使用队列功能

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

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

8.6 滑动效果

8.6.1 slideDown()

可以在元素上创建向下滑动显示效果。

$(selector*).slideDown(*speed,callback);

<style type="text/css"> 
#panel,#flip{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel{padding:50px;
display:none;}
</style>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>

8.6.2 slideUp() 向上滑动

$(selector*).slideDown(*speed,callback);

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

8.6.3 slideToggle() 方法

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

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

8.7 停止动画

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

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

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

只是停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：