jQuery -- 知识点回顾篇（二）：jQuery效果的使用

1. jQuery 效果 -- 隐藏和显示:  使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("#myDiv1").hide();

                //语法格式：$(selector).hide(speed,callback);

                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。

                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。

                // callback的使用如下，即第2个参数是一个函数，jQuery效果执行完会执行该函数。

                // $("#myDiv1").hide(3000,function(){

                //      alert("myDiv1隐藏了");

                // });

            });

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

                $("#myDiv1").show();

                //语法格式：$(selector).show(speed,callback);

                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。

                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btnHide">隐藏</button>

    <button type="button" id="btnShow">显示</button>

    <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>

</body>

</html>

　　　　

2. jQuery 效果 - 淡入淡出

　　(1) fadeIn() 方法用于淡入已隐藏的元素。

　　(2) fadeOut() 方法用于淡出可见元素。

　　(3) fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则添加淡入效果。如果元素已淡入，则添加淡出效果。

　　(4) fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("#myDiv1").fadeIn();

                //语法格式：$(selector).fadeIn(speed,callback);

                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。

                //可选参数2：callback 参数是该效果完成后所执行的函数名称。

            });

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

                $("#myDiv1").fadeOut();

                //语法格式：$(selector).fadeOut(speed,callback);

                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。

                //可选参数2：callback 参数是该效果完成后所执行的函数名称。

            });

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

                $("#myDiv1").fadeToggle();

                //语法格式：$(selector).fadeToggle(speed,callback);

                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。

                //可选参数2：callback 参数是该效果完成后所执行的函数名称。

            });

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

                $("#myDiv1").fadeTo("slow",0.35);

                //语法格式：$(selector).fadeTo(speed,opacity,callback);

                //第一个参数是必须的：传入的值可以是"slow"、"fast" 、毫秒；

                //第二个参数是必须的：传入值是透明度，取值在0-1之间

                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称。

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btnfadeIn">fadeIn</button>

    <button type="button" id="btnfadeOut">fadeOut</button>

    <button type="button" id="btnfadeToggle">fadeToggle</button>

    <button type="button" id="btnfadeTo">fadeTo</button>

    <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>

</body>

</html>

3. jQuery 效果 - 滑动

　　(1) slideDown() 方法用于向下滑动元素。

　　(2) slideUp() 方法用于向上滑动元素。

　　(3) slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素已向下滑动，则向上滑动它们。如果元素已向上滑动，则向下滑动它们。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("#myDiv1").slideDown();

                //语法格式：$(selector).slideDown(speed,callback);

                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。

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

            });

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

                $("#myDiv1").slideUp();

                //语法格式：$(selector).slideUp(speed,callback);;

                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。

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

            });

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

                $("#myDiv1").slideToggle();

                //语法格式：$(selector).slideToggle(speed,callback);;

                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。

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

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btnslideDown">slideDown</button>

    <button type="button" id="btnslideUp">slideUp</button>

    <button type="button" id="btnslideToggle">slideToggle</button>

    <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>

</body>

</html>

4. jQuery 效果 - 动画

　　animate() 方法用于创建自定义动画。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("#myDiv1").animate({left:'250px'});

                //语法格式：$(selector).animate({params},speed,callback);

                //第一个参数是必须的：值是定义形成动画的 CSS 属性

                //第二个参数是可选的：传入的值是"slow"、"fast" 、毫秒

                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称

                //第一个参数的css属性也可以使用相对值，像下面这样

                //$("#myDiv1").animate({left:'250px',height:'+=10px',width:'+=10px'});

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_animate">animate</button>

    <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>

</body>

</html>

5. jQuery -- 停止动画

　　stop() 方法用于停止动画或效果，在它们完成之前。

　　stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("#myDiv1").animate({left:'250px'},5000);

            });

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

                $("#myDiv1").stop();

                //语法格式：$(selector).stop(stopAll,goToEnd);

                //可选参数1：规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

                //可选参数2：规定是否立即完成当前动画。默认是 false。

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_animate">animate</button>

    <button type="button" id="btn_stop">Stop</button>

    <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>

</body>

</html>

6. jQuery - 链式编程

　　链式编程：在相同的元素上运行多条 jQuery 命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

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

                $("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000);

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btnLink">链式编程</button>

    <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>

</body>

</html>

jQuery -- 光阴似箭（二）：jQuery效果的使用的更多相关文章

  1. 强大的JQuery（二）--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  2. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  3. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  4. 前端学习之jquery（二）

    操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...

  5. jQuery的事件,动画效果等

    一.事件 click(function(){}) 点击事件 hover(function(){})   悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...

  6. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  7. WEB入门之十二 jquery简介

    学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...

  8. 应该掌握的JQuery的7个效果

    一: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 实例 //点击隐藏 $("#hide&q ...

  9. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  10. 3种jQuery弹出大图效果

    本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. Perl的浅拷贝和深度拷贝

    首先是深.浅拷贝的概念: 浅拷贝:shallow copy,只拷贝第一层的数据.Perl中赋值操作就是浅拷贝 深拷贝:deep copy,递归拷贝所有层次的数据,Perl中Clone模块的clone方 ...

  2. Multi-Model多模数据库引擎设计与实现

    如今,随着业务“互联网化”和“智能化”的发展以及架构 “微服务”和“云化”的发展,应用系统对数据的存储管理提出了新的标准和要求,数据的多样性成为了数据库平台面临的一大挑战,数据库领域也催生了一种新的主 ...

  3. MyBatis学习总结（三）——多表关联查询与动态SQL

    在上一章中我们学习了<MyBatis学习总结(二)——MyBatis核心配置文件与输入输出映射>,这一章主要是介绍一对一关联查询.一对多关联查询与动态SQL等内容. 一.多表关联查询 表与 ...

  4. JQuery ajax的使用

    JQuery 真的是好东西       $.ajax({         type: "post",         url: "/DataCheck",   ...

  5. 8.异常_EJ

    第57条: 只针对异常情况才使用异常 异常是为了在异常情况下使用而设计的,不要将它们用于普通的控制流,也不要编写迫使它们这么做的API. 第58条: 对可恢复的情况使用受检异常,对编程错误使用运行时异 ...

  6. 创建Aurelia项目

    什么是Aurelia? Aurelia 是一个新的开源的,基于web标准的mvvm框架,是一个现代化的js模块的集合. Aurelia提供了丰富的plugin,例如国际化,验证,模态框,UI可视化等. ...

  7. 使用laravel框架开发接口时ajax post请求报错419

    nginx服务器,使用laravel框架开发后台接口.get请求正常,但是post请求一直报错.H5和APP都不成功,code=419. 解决办法: 找到 VerifyCsrfToken.php文件( ...

  8. 前端入门3-CSS基础

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  9. python之把字符串形式的函数编译执行

    实现效果:执行字符串形式的函数 代码如下 # name = 'aaa' # data = [18,32,33] # def hellocute(): # return "name %s ,a ...

  10. 2018-05-09 5分钟入门CTS-尝鲜中文版TypeScript

    知乎原链 本文为中文代码示例之5分钟入门TypeScript的CTS版本. CTS作者是@htwx(github). 它实现了关键词和标准库的所有命名汉化. 本文并未使用附带的vscode相关插件(包 ...