JQuery学习之路Part4：animate动画(隐藏/显示、淡入淡出、滑动、自定义动画、动画队列、停止动画)

谁借莪１个温暖的怀抱￠ 2023-07-12 08:42 19阅读 0赞

# 一、隐藏/显示 #

## 1、显示 ##

show([速度],[回调函数])

例：

显示所有p元素
    $("p").show();

## 2、隐藏 ##

hide([速度],[回调函数])

例：

隐藏所有p元素
    $("p").hide();

## 3、显示和隐藏之间智能切换 ##

相当于是一个开关 若是开着就将其关闭 若是关着就将其开启

toggle([速度],[回调函数])

**注**：不传入速度参数则无动画效果  
**传入字符串：**  
fast:200ms  
normal:400ms  
slow:600ms  
填入错误按默认(normal)速度  
**传入数值：** 毫秒(ms)

--------------------

# 二、淡入淡出 #

## 1、淡入已隐藏的元素 ##

$(selector).fadeIn([速度],[回调函数])

例：

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

## 2、淡出可见元素 ##

$(selector).fadeOut([速度],[回调函数])

例：

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

## 3、元素淡出和淡入之间智能切换 ##

$(selector).fadeToggle([速度],[回调函数])

例：

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

## 4、渐变为给定的不透明度 ##

$(selector).fadeTo(速度,不透明度[,回调函数]);

例：

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

**注**：不传入速度参数则无动画效果  
**传入字符串：**  
fast:200ms  
normal:400ms  
slow:600ms  
填入错误按默认(normal)速度  
**传入数值：** 毫秒(ms)

--------------------

# 三、滑动 #

## 1、向下滑动元素 ##

$(selector).slideDown([速度],[回调函数]);

例：

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

## 2、向上滑动元素 ##

$(selector).slideUp([速度],[回调函数]);

例：

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

## 3、向上和向下滑动元素之间智能切换 ##

$(selector).slideToggle([速度],[回调函数]);

例：

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

**注**：不传入速度参数则无动画效果  
**传入字符串：**  
fast:200ms  
normal:400ms  
slow:600ms  
填入错误按默认(normal)速度  
**传入数值：** 毫秒(ms)

--------------------

# 四、animate 动画 #

## 1、创建自定义动画animate ##

$(selector).animate(CSS样式[,速度],[回调函数])

**注**：  
默认所有 HTML 元素都有一个静态位置且无法移动  
如需对位置进行操作须首先把元素的position属性设置为relative fixed或absolute  
例：

$("button").click(function(){
        
      $("div").animate({
        left:'250px'});
    });

## 2、操作多个动画属性 ##

多个属性之间用逗号(,)分隔

当使用 animate() 时必须使用**Camel标记法**书写所有的属性名  
例如 使用paddingLeft而不是 padding-left 使用marginRight而不是margin-right 等等

例：

$("button").click(function(){
        
      $("div").animate({
        
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
      });
    });

## 3、使用相对值(相对于元素的当前值) ##

属性值可使用当前值的相对值

例：

$("button").click(function(){
        
      $("div").animate({
        
        left:'250px',
        height:'+=150px',
        width:'+=150px'
      });
    });

## 4、使用预定义值 ##

共有三个参数：show hide toggle  
show：显示  
hide：隐藏  
toggle：显示和隐藏之间进行切换

例：

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

## 5、使用队列(按顺序执行动画) ##

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

例二：

$("button").click(function(){
        
      var div=$("div");
      div.animate({
        left:'100px'},"slow");
      div.animate({
        fontSize:'3em'},"slow");
    });

--------------------

# 五、停止动画或效果 #

$(selector).stop([是否清除动画队列(后面的队列全停止)],[是否跳转到当前动画最终效果])

注：  
stopAll 参数：默认为false  
goToEnd参数：默认为false

例：

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

--------------------