携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

隐藏和显示效果

hide()和show()方法来隐藏和显示HTML元素

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

语法格式：$(selector).hide(speed,callback);
speed参数规定的是速度，可以取值slow、fast、毫秒
callback参数规定的是隐藏或显示完成之后执行的函数名称

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

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

淡入淡出效果

通过jQuery实现淡入淡出的效果一共有四种方法：

jQuery fadeIn() 用于淡入已隐藏的元素。

jQuery fadeOut() 方法用于淡出可见元素。

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

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

滑动效果

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

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

$(selector).slideToggle(speed,callback);可以在 slideDown() 与 slideUp() 方法之间进行切换。

动画效果

jQuery animate() 方法用于创建自定义动画。

语法格式： $(selector).animate({params},speed,callback);

paeams参数定义形成动画的CSS属性；
speed参数定义效果的时长
callback参数定义效果完成之后执行的函数

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

操作多个属性

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

使用队列功能

当使用多个animate()会逐一实现这些调用

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

停止动画

jQuery stop() 方法用于在动画效果完成之前将其停止。

语法格式：$(selector).stop(stopAll,goToEnd);

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

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

链

通过 jQuery，可以把动作/方法链接在一起。 Chaining 允许我们在一条语句中运行多个 jQuery 方法

我们平时都是一条一条的写jQuery，链接技术允许我们在相同的元素上运行多条jQuery。

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