JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

 1  /**
 2              * 【JQ基础动画】
 3              *  show() 显示
 4              *  hide() 隐藏
 5              *  toggle() 切换
 6              *      默认无动画,如果要产生动画
 7              *      在括号内,添加毫秒数,可产生动画和控制动画的快慢
 8              *
 9              *  《滑动动画》
10              *      slideDown() 滑动显示(下)
11              *      slideUp()   滑动隐藏(上)
12              *      slideToggle 滑动切换
13              *          默认有动画,默认是400毫秒
14              *   《淡入淡出动画》
15              *      fadeIn()            淡入显示
16              *      fadeOut()           淡出显示
17              *      fadeToggle()        切淡
18              *      fadeTo(时间,透明度)   设置透明度
19              */

一.基础动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="lib/jquery-1.12.2.js"></script>
 7     <script>
 8         $(function () {
 9            $(‘button:eq(0)‘).click(function () {
10                $(‘img‘).show(1000);
11            });
12
13             $(‘button:eq(1)‘).click(function () {
14                 $(‘img‘).hide(1000);
15             });
16
17             $(‘button:eq(2)‘).click(function () {
18                 $(‘img‘).toggle(1000);
19             });
20         });
21     </script>
22 </head>
23 <body>
24    <button>显示</button>
25    <button>隐藏</button>
26    <button>切换</button><br/>
27    <img src="images/1.gif" >
28 </body>
29 </html>

二.滑动动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <script src="lib/jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(‘button‘).eq(0).click(function () {
                 $(‘.box‘).slideDown();
            });
            $(‘button‘).eq(1).click(function () {
                 $(‘.box‘).slideUp();
            });
            $(‘button‘).eq(2).click(function () {
                 $(‘.box‘).slideToggle();
            });
        });
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <br>
    <!--<img src="images/1.gif"  width="150" height="440">-->
    <div class="box"></div>
</body>
</html>

三.淡入淡出动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 400px;
10             background-color: pink;
11         }
12     </style>
13     <script src="lib/jquery-1.12.2.js"></script>
14     <script>
15         $(function () {
16             $(‘button‘).eq(0).click(function () {
17                  $(‘.box‘).fadeIn();
18             });
19             $(‘button‘).eq(1).click(function () {
20                  $(‘.box‘).fadeOut();
21             });
22             $(‘button‘).eq(2).click(function () {
23                  $(‘.box‘).fadeToggle(1000);
24             });
25             $(‘button‘).eq(3).click(function () {
26                 $(‘.box‘).fadeTo(400,0.3);
27             });
28         });
29     </script>
30 </head>
31 <body>
32     <button>显示</button>
33     <button>隐藏</button>
34     <button>切换</button>
35     <button>透明度</button>
36     <br>
37     <!--<img src="images/1.gif"  width="150" height="440">-->
38     <div class="box"></div>
39 </body>
40 </html>

四.自定义动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .main{
 8             width: 100px;
 9             height: 100px;
10             background-color: pink;
11             /*transition: all .4s;*/
12         }
13     </style>
14     <script src="lib/jquery-1.12.2.js"></script>
15     <script>
16         $(function () {
17                 /**
18                  *  自定义动画(兼容IE678.)
19                  *   其实JQ的动画也可以通过CSS3实现,但是CSS3会有兼容问题
20                  *       移动端项目的时候,直接使用CSS3实现效果即可
21                  *       PC端要考虑低版本浏览器兼容,可以使用JQ的animate函数
22                  *
23                  *   有动画的属性:
24                  *      值是数字的属性:(颜色,文本居中这些就实现不了)
25                  *   核心函数
26                  *      .animate({属性集合})
27                  *
28                  * */
29
30
31
32                 //(颜色,文本居中这些就实现不了动画)
33                 $(‘button‘).click(function () {
34                     $(‘.main‘).animate({
35                         "width":"300px",
36                         "height":"300px",
37                         "backgroundColor":"#f90",
38                         "textAlign":"center",
39                         "lineHeight":"300px"
40                     },300);
41                 });
42         });
43     </script>
44 </head>
45 <body>
46 <button>动起来</button>
47 <div class="main">
48     文字行号
49 </div>
50 </body>
51 </html>
时间: 2024-10-06 21:38:40

JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画的相关文章

JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() 淡入淡出:JQuery fadeIn().JQuery fadeOut().JQuery fadeToggle().JQuery fadeTo() 滑动:JQuery slideDown().JQuery slideUP().JQuery slideToggle() 动画:JQuery animat

第七节(隐藏、显示、切换,滑动,淡入淡出,以及动画)

文档查询地址:http://jquery.cuishifeng.cn/ 通过 jQuery,可以实现元素的淡入淡出效果 jQuery 拥有下面四种 fade 方法: fadeIn() 用于淡入已隐藏的元素 fadeOut() 方法用于淡出可见元素 fadeToggle()该方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换. 如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果. 如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果. jQuery

jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画

jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hide()与show()方法 eg1:显示 <style type="text/css"> *{margin:0;padding:0;} .body{font-size:12px;font-family:"微软雅黑";color:#666;} .yym{wid

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

ListView的淡入淡出和Activity的淡入淡出补间动画效果Animation

//=========主页面======================= package com.bw.lianxi7; import android.os.Bundle;import android.app.Activity;import android.content.Intent;import android.view.Menu;import android.view.View;import android.view.animation.Animation;import android.

jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggle() 方法来切换 hide() 和 show() 方法. parents 找到每个span元素的所有祖先元素. $("span").parents() 找到每个span的所有是p元素的祖先元素. $("span").parents("p") 1 &

用POP动画编写带富文本的自定义动画效果

[源码] https://github.com/YouXianMing/POPNumberCount [效果] [特点] * 支持富文本 * 可定制型强(继承父类重写父类的startAnimation方法即可) * 支持动画的中断与持续 * 支持CAMediaTimingFunction * 数据与UI隔离,便于你封装属于你的类 [核心] // // POPNumberCount.h // POP // // Created by XianMingYou on 15/4/10. // Copyr

jquery 用attr修改src 淡入淡出

$("#wanwan").animate({ opacity: 'toggle' }, "slow", null, function () { $("#wanwan").attr("src", "images/back_1.gif"); $("#wanwan").animate({ opacity: 'toggle' }, "slow"); });

jquery实现图片轮播淡入淡出效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        * {margin:0; padding:0;}        #container {width:605px; h

【JQuery】(1)JQuery基础

JQuery基础 2019-11-02  21:11:17  by冲冲 1.jQuery简介 jQuery:轻量级."写的少,做的多".JavaScript函数库. 2.jQuery功能 HTML元素选取 HTML元素操作 HTMLDOM遍历和修改 CSS操作 HTML事件函数 JavaScript特效和动画 Ajax异步操作 提供丰富的插件 3.jQuery版本 目前jQuery有三大版本: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增.因此一般项目来说,