一、隐藏显示

1、show()--显示隐藏的被选择元素

例:$(selector).show(speed,callback);

2、hide()--隐藏被选元素的内容

例:$(selector).hide(speed,callback);

speed:规定元素隐藏、完全可见的速度。默认为 "0"。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

callback:show 函数执行完之后,要执行的函数。

二、上下滑动

1、slideup()--滑动上升

例:$(selector).slideUp(speed,callback)

2、slideDown()--滑动下降

例:$(selector).slideDown(speed,callback)

三、淡入淡出

1、fadeIn()--淡入元素

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

2、fadeOut()--淡出元素

$(selector).fadeOut(speed,callback)

四、自定义动画

animate()-- 执行 CSS 属性集的自定义动画

$(选择器).animate({params},speed,function(){回调函数});

扩展:

(1)$(selector).animate(styles,speed,easing,callback)

规定在不同的动画点中设置动画速度的 easing 函数。

内置的 easing 函数:

  • swing
  • linear

(2)$(selector).animate(styles,options)

规定动画的额外选项。

可能的值:

  • speed - 设置动画的速度
  • easing - 规定要使用的 easing 函数
  • callback - 规定动画完成之后要执行的函数
  • step - 规定动画的每一步完成之后要执行的函数
  • queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
  • specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

(3)动画停止

stop()--停止动画

$(selector).stop(stopAll,goToEnd)

stopAll--规定是否停止被选元素的所有加入队列的动画。

goToEnd--规定是否允许完成当前的动画。

jQuery入门基础(动画效果)的更多相关文章

  1. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

  2. jQuery基础---动画效果

    内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性  发文不易,转载请注明出处~ 一.显示.隐藏 jQuery 中显示方法 ...

  3. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  4. jQuery之简单动画效果

    1. show()显示动画 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow",&quo ...

  5. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

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

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

  7. python 之 前端开发( jQuery事件、动画效果、.each()、 .data())

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  8. [学习笔记]jQuery实现一些动画效果的方法

    jQuery实现效果的方法 1,隐藏和显示:hide(),show(),toggle()  // [ˈtɑ:gl]切换 语法: $(selector).hide(speed,callback); $( ...

  9. 关于jquery自带动画效果的stop()问题

    首先先来看一下jquery中stop()的用法 stop()用于在动画执行前停止正在执行的动画 stop(stopAll,goToEnd)的两个参数为布尔值: stopAll:true/false:是 ...

随机推荐

  1. JavaScript的使用你知道几种?(上)

    往期回顾 在上一期的<JavaScript的组成 | DOM/BOM>☜里,我们有对文档对象模型-DOM.浏览器对象模型-BOM 这两大部分进行了解学习,如果有还不是很明白的小伙伴们,可以 ...

  2. ARTS(一)

    ARTS第一周,2019年3月17日,星期日,天气晴. A:算法学习(Algorithm) 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LE ...

  3. 关于vuex和Promise reject 或.catch 的报错处理。

    在我们开发过程中,经常会使用vuex来管理接口请求和返回数据. 在vue组件页面使用computed来读取vuex中state的数据. getTaskList({ commit }, payload) ...

  4. sqlserver2008数据库自动备份的sql脚本及使用bat命令执行脚本

    -----sql脚本 declare @fileName varchar(255) ,--定义备份文件名变量         @dbname varchar(255)--定义备份数据库名变量decla ...

  5. SpringBoot的学习【4.快速实现一个SpringBoo的应用】

    1.引子 正常创建一个 Spring Boot 应用的顺序: 创建 Maven 项目 pom 文件导入依赖(参照 Spring 官方文档) 编写主程序 编写业务逻辑 但其实IDE( idea 和 Sp ...

  6. 学会Git玩转GitHub全

    我这个笔记是利用HTML5来写的,所以我现附上代码以及并上照片:  当下@future 2019/4/29 19:55:33 <!DOCTYPE html><html> < ...

  7. A New Function(LightOJ 1098)积性函数前缀和的应用

    题意:要求对于1~n,每个数的约数(不包括1和其本身)的和. 题解:由于题目数据有2*10^9之大,因而不能直接暴力.需要考虑积性函数的特性,由于必定有重复的约数出现,因而可以对重复约数所在的区间进行 ...

  8. 【python接口自动化-requests库】【二】requests库简单使用(入门)

    一.post请求 前面讲了,我们get请求的时候,引入requests的包,然后直接使用get方法,那么post是不是一样的? 1.首先我们先引入requests import requests 2. ...

  9. LeetCode - Online Election

    In an election, the i-th vote was cast for persons[i] at time times[i]. Now, we would like to implem ...

  10. 冒号课堂 编程范式与OOP思想

    上篇:编程范式与编程语言 第1课 开班导言 第2课 重要范式 第3课 常用范式 第4课 重温范式 第5课 语言小谈 第6课 语言简评 下篇:抽象机制与对象范式 第7课 抽象封装 第8课 抽象接口 第9 ...