jQuery动画功能和封装原理

目录

1 显示/隐藏

2 淡入/淡出

3 向上/向下滑动

4 动画

5 多个动画设置

6 动画队列

7 下拉式菜单

8 Jquery 的封装原理

---

1 显示/隐藏

jQuery有一些易于实现的效果来创建动画。

hide()和show()方法用于隐藏和显示所选元素。

toggle()方法用于在隐藏和显示元素之间切换。

例如：

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

hide / show / toggle方法可以带一个速度参数,以毫秒为单位指定动画速度。

例如，我们为toggle方法传入一个1000毫秒的参数：

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

hide / show / toggle 方法还有第二个可选参数可选，这是一个在动画完成后执行回调的方法。

2 淡入/淡出

与 hide / show 方法类似，jQuery提供了 fadeIn / fadeOut 方法，它将一个元素淡入和淡出显示。

和 toggle() 方法在隐藏和显示之间切换一样，fadeToggle()方法可以在淡入淡出中进行切换。

让我们看看fadeToggle()的实例：

$(function() {
  $("p").click(function() {
    $("div").fadeToggle(1000);
  });
});

和toggle()一样，fadeToggle()也具有两个可选参数：速度和回调函数。

用于淡入/淡出的另一种方法是fadeTo()，它将淡入/淡出到给定的不透明度（0和1之间的值）。 例如：$("div").fadeTo(1500,0.7);

3 向上/向下滑动

slideUp() 和 slideDown() 方法用于在元素上创建滑动效果。

再次，类似于以前的切换方法，slideToggle() 方法提供在滑动效果之间切换，一样也有两个可选参数：速度和回调函数。

例如：

$(function() {
  $("p").click(function() {
    $("div").slideToggle(500);
  });
});

4 动画

animate() 方法允许您将动画设置为设定值或相对于当前值的值。

你需要将CSS属性定义为JSON格式的参数（"key":"value"）。

第二个参数定义了动画的速度。

例如，以下代码将div的width属性在1秒内改变到250px：

$("div").click(function() {
  $("div").animate({width: '250px'}, 1000);
});

请注意提供CSS参数的JSON格式。 在处理CSS属性时，JSON语法也被用于以前的模块。

你可以使用上述语法对任何CSS属性进行动画处理，但有一个重要的事情要记住：当与animate() 方法一起使用时，所有属性名称都必须是camel-cased（camelCase是写复合词或短语的做法， 每个单词或缩写以大写字母开头，第一个单词以小写形式显示）。
您将需要编写paddingLeft而不是padding-left，marginRight，而不是margin-right等等。

5 多个动画设置

多个属性可以通过用逗号分隔来同时动画化。

例如：

$("div").animate({
  width: '250px',
  height: '250px'
}, 1000);

也可以定义相对值（该值相对于元素的当前值）。 通过将 += 或  -= 放在值的前面完成：

$("div").animate({
  width: '+=250px',
  height: '+=250px'
}, 1000);

要在动画完成之前停止动画，jQuery提供了stop()方法。

6 动画队列

默认情况下，jQuery带有动画的队列功能。

这意味着如果你写了多个animate()，则jQuery会为这些方法创建一个“内部”队列。然后逐个运行动画。

例如：

var div = $("div");
div.animate({opacity: 1});
div.animate({height: '+=100px', width: '+=100px', top: '+=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '+=100px'}, 500);
div.animate({height: '+=100px', width: '+=100px', top: '-=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '-=100px'}, 500);
div.animate({opacity: 0.5});

以上的animate() 方法将一个接一个地运行。

7 下拉式菜单

让我们创建一个简单的下拉菜单，点击菜单项将打开。

HTML：

<div class="menu">

  <div id="item">下拉菜单</div>

  <div id="submenu">

    <a href="#">选项1</a>

    <a href="#">选项2</a>

    <a href="#">选项3</a>

  </div>

</div>

JS:

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

  $("#submenu").slideToggle(500);

}); 

上面的代码处理 id="item" 元素的点击事件，并在500毫秒内打开/关闭子菜单。

8 Jquery 的封装原理

<h1>jQuery中的封装原理</h1>

<h3>匿名函数的自调用</h3>

<h3>闭包原理</h3>

闭包的优点：

1、可以减少全局变量的对象，防止全局变量过去庞大，导致难以维护

2、防止可修改变量，因为内部的变量外部是无法访问的，并且也不可修改的。安全

3、读取函数内部的变量，另一个就是让这些变量的值始 终保持在内存中。