jQuery学习---第二天-优快云博客

本文介绍了jQuery中的动画方法，如animate()及其参数设置，并演示了如何实现元素位置、不透明度等变化。此外，还讲解了stop()方法的用法及如何链接多个动作。

jQuery动画

$(selector).animate({params},speed,callback);
<!---
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称
--->

　　例子：

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5', //不透明度
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
<!--如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。--->

<!--jQuery animate() - 使用预定义的值--->
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

js语句是逐一执行的，这里可能就会有一个问题，如果设置了动画时长。那么可能会动画没有执行完就执行下面的代码了。这时候推荐这样写。

  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("hello  word!");
    });
  });
});

通过 jQuery，您可以把动作/方法链接起来。Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

意思就是说如果一个元素有多个动作。你不需要分开写，直接在后面追加就行了，当一个动画执行完，会紧跟着执行另一个动画。

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

jQuery - 获得内容和属性

转载于:https://www.cnblogs.com/sjyzz/p/6610768.html