jQuery基本动画效果

发布时间：2年前作者：老郭热度： 2518 ℃评论数：

# jQuery基本动画效果

### 1、 基本动画

该动画效果的本质是  宽度、高度、透明度、display   在变化

> 具体实现：

```
<script type="text/javascript">
   function f1() {
     // 隐藏
       // $().hide([速度(毫秒),回调函数])；
     // 回调函数。效果呈现完毕会自动调用函数执行
     $('div').hide(3000,function(){
        alert('我消失了');
        });
 }

function f2() {
     // 显示
       // $().hide([速度(毫秒),回调函数])；
     // 回调函数，效果呈现完毕会自动调用函数执行
     $('div').show(3000,function(){
            alert('我又回来了');
       })
  }

function f3() {
     $('div').toggle(2000);
    }
</script>

<body>
   <div>today is rain</div>
    <br>
    <input type="button" name="隐藏" onclick="f1()">
    <input type="button" name="显示" onclick="f2()">
    <input type="button" name="开关" onclick="f3()">
</body>

动画处理

show(speed,[callback])

显示隐藏的匹配元素

hide(speed,[callback])

隐藏显示的元素

toggle()

切换元素的可见状态

toggle(switch)

根据switch参数切换元素的可见状态

（true为可见。false为隐藏）。

toggle(speed,[callback])

以优雅的动画切换所有匹配的元素可见状态
```

### 2、垂直动画

> 效果的本质：高度、display  在变化
    滑动效果，垂直方向隐藏和显示
   
```
    slideDown(speed,[callback])
                    显示元素
    slideup(speed,[callback])
                    隐藏元素
    slideToggle(speed,[callback])
                    切换所有匹配元素的可见性
```

> 具体使用：

```
<script type="text/javascript">

function f1() {
     // 隐藏
       // $().hide([速度(毫秒),回调函数])；
     // 回调函数。效果呈现完毕会自动调用函数执行
     $('div').slideUp(2000);
   }

function f2() {
     // 显示
       // $().hide([速度(毫秒),回调函数])；
     // 回调函数，效果呈现完毕会自动调用函数执行
     $('div').slideDown(2000);
 }

function f3() {
     //开关效果
      //$().slideToggle(速度(毫秒),回调函数)；
     $('div').slideToggle(2000);/*开关效果*/
   }

$(function () {
     setInterval("f3()",2000);/*自动执行函数*/
   })
</script>

```

### 3、 颜色渐变动画

>淡入淡出效果

```
fadeIn(speed,[callback])
不透明的变化来实现所有匹配元素的淡入效果（显示）

fadeOut(speed,[callback])
通过不透明的变化来实现所有匹配元素的淡出效果（隐藏）

fadeTo(speed,opacity,[callback])
把所有匹配元素的透明度以渐进方式调整到指定的不透明度

fadeToggle(speed,[callback])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果  
```
```
<body>
  <h2>颜色渐变动画效果</h2>
   <div style="opacity: 0.8">today is rain</div>
 <br>
    <input type="button" name="" onclick="f1()" value="隐藏">
 <input type="button" name="" onclick="f2()" value="显示">
 <input type="button" name="" onclick="f3()" value="开关">
</body>

```

>  颜色渐变动画效果的实现：

```
<head>
   <script type="text/javascript">
       function f1() {
         // 隐藏
           // $().hide([速度(毫秒),回调函数])；
         // 回调函数。效果呈现完毕会自动调用函数执行
         $('div').fadeOut(2000);
       }

function f2() {
         // 显示
           // $().hide([速度(毫秒),回调函数])；
         // 回调函数，效果呈现完毕会自动调用函数执行
         $('div').fadeIn(2000);
        }

function f3() {
         //开关效果
          //$().slideToggle(速度(毫秒),回调函数)；
         $('div').fadeToggle(2000);/*开关效果*/
        }
   </script>

function f3() {
     $('div').css('background-color','purple')
     $('div').fadeToggle(2000,f4);
 }

function f4() {
     $('div').css('background-color','orange')
     $('div').fadeToggle(2000,function(){
          alert('ok , it fell good')
        });
 }
</script>

//使用fadeTo()方法给指定的层设置透明度：

function f1() {
         //给div层设置指定的透明度
         //$('div').fadeTo(2000,透明度 清楚0-1不清楚，回调函数)
         $('#son').fadeTo(500,0.3);
        }
   </script>

<body>
   <h2>颜色渐变动画效果</h2>
   <div id="pat"><div id="son">today is rain</div></div>
   <br>
    <input type="button" value="触发" onclick="f1()">
</body>
```

jQuery,动画

上一篇：jQuery属性选择器使用

下一篇：利用Ajax技术实现天气预报接口

栏目导航

Ajax是什么？ 1193 ℃
网站禁止浏览器缓存 1253 ℃
Ajax之get方式请求 2713 ℃
Ajax之post方式请求 2151 ℃
Json使用 1149 ℃
无刷新表单信息提交 1363 ℃
使用Ajax中$.post方法前台获取json数据，将数据转换为... 1736 ℃
细说jQuery的选择器 1342 ℃
jQuery的属性操作 2095 ℃
jQuery快捷操作 1253 ℃
jQuery对象与dom对象关系 3002 ℃
jQuery的事件加载机制 1557 ℃
jQuery属性选择器使用 2167 ℃
jQuery基本动画效果 2518 ℃
利用Ajax技术实现天气预报接口 1413 ℃

jQuery基本动画效果

栏目导航

相关文章

微信小程序

手机扫码访问