2021-05-19

    JQuery—动画篇

1: 动画基础隐藏于显示

jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果

1：jQuery中隐藏元素的hide方法

让页面上的元素不可见，

一般可以通过设置css的display为none属性。

但是通过css直接修改是静态的布局，

语法：

         $elem.hide();

hide([speed,[easing],[fn]])

 2:jQuery中显示元素的show方法

css中有display:none属性，同时也有display:block，所以 jQuery同 样提供了与hide相反的show方法

方法的使用几乎与hide是一致的，hide是让元素显示到隐藏， show则是相反，让元素从隐藏到显示

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

​

3：jQuery中显示与隐藏切换toggle方法

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

实例：

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

 2: 上卷下拉效果

1：jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素，通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

语法：

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

可选的 callback 参数是滑动完成后所执行的函数名称。

2：jQuery slideUp() 方法

    通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

    用法同上下拉动画slideDown

3：jQuery slideToggle () 方法

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

语法：

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

实例：

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

3: 淡入淡出效果

1：fadeOut()

   fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡  动画效果, 通过不透明度的变化来实现所有匹配元素的淡出效果, 透明度的参数是0~1之间的值，

  所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏

 语法：

   fadeOut([speed],[easing],[fn])

实例：

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

 

2：fadeOut()

用法同上fadeOut();

实例：

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

3：fadeToggle()

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

语法：

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

实例：

 

$("p").fadeToggle("fast",function(){
     alert("Animation Done.");
});

4：fadeTo()

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间），  把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。

语法：

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

实例：

用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框

$("p").fadeTo("fast",0.25,function(){
      alert("Animation Done.");
});

4：jQuery中toggle与slideToggle以及fadeToggle的比较

操作元素的显示和隐藏可以有几种方法。

            例如：

            改变样式display为none

            设置位置高度为0

            设置透明度为0

            都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法

 

      1：toggle、sildeToggle以及fadeToggle的区别：

                toggle：切换显示与隐藏效果

                sildeToggle：切换上下拉卷滚效果

                fadeToggle：切换淡入淡出效果

                当然细节上还是有更多的不同点:

 

      2：toggle与slideToggle细节区别：

     1）toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

     2）slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

     3） fadeToggle方法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

        元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

        元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

  注释：隐藏的元素不会被完全显示（不再影响页面的布局）

5：自定义动画animate

        用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都 表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

有些复杂的动画通过之前学到的几个动画函数是

不能够实现，这时候就需要强大的animate方法了

语法：

animate(params,[speed],[easing],[fn])

实现淡入淡出的效果：

$("#btn3").click(function(){
      $("#p3").animate({
      opacity:"toggle"
    },"slow");
  });

显而易见，animate方法更加灵活了，可以精确的控制样式属性从而执行动画

  注意：所有用于动画的属性必须是数字的，除非另有说明，这些属性如果不是数字的将不能使用基本的jQuery功能

特别注意：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"），单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用

 

1：除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

.animate({
     width:"toggle"
});

2：如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的

当前值加上或者减去给定的数字来计算的

.animate({
     left:'+=50px'
},"slow");

实例：

 

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