notes_estom/JavaScript/jQuery/3动画.md

jQuery效果

1 显示和隐藏

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

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

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

2 淡入淡出

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

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

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

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

3 滑动

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

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

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

4 jquery效果动画

定义

animate()方法

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

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

使用

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

5 停止动画

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

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

6 jquery动画链

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

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