详解jQuery动画

css样式:

button{
    display: block;
    margin: 0px auto 20px;
}
div{
    width: 200px;
    height: 200px;
    background: pink;
    margin: 0 auto;
    display: none;
}

HTML内容:

  <button name="block">点我出现</button><br>
    <button name="none">点我消失</button><br>
    <button name="toggle">点我切换</button><br>
    <div></div>

1. jQuery动画–隐藏显现

show(), hide(), toggle()

jQuery部分:显示 / 出现 标签对象.show()参数1 : 毫秒 也就是动画的执行时间参数2 : 运动的方式 linear 线性参数3 : 回调函数 当运动结束时,执行的函数程序
$(‘[name="block"]‘).click(function(){
    $(‘div‘).show(1000, ‘linear‘ , function(){
        console.log(‘标签显示了‘)
    })
})

隐藏 / 消失 标签对象.hide()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

$(‘[name="none"]‘).click(function(){
    $(‘div‘).hide(1000, ‘linear‘ , function(){
        console.log(‘标签隐藏了‘)
    })
})
隐藏显示切换 标签对象.toggle()参数1 : 毫秒 也就是动画的执行时间参数2 : 运动的方式 linear 线性参数3 : 回调函数 当运动结束时,执行的函数程序
$(‘[name="toggle"]‘).click(function(){
    $(‘div‘).toggle(1000, ‘linear‘ , function(){
        console.log(‘标签切换了‘)
    })
})  

2. jQuery之动画详解–下拉上卷

slideDown(),slideUp(),slideToggle().

jQuery部分:
下拉 显示 / 出现 标签对象.slideDown()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

$(‘[name="block"]‘).click(function(){
    $(‘div‘).slideDown(1000, ‘linear‘ , function(){
        console.log(‘标签下拉显示了‘)
    })
})

上卷 隐藏 / 消失 标签对象.slideUp()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

$(‘[name="none"]‘).click(function(){
    $(‘div‘).slideUp(1000, ‘linear‘ , function(){
        console.log(‘标签上拉隐藏了‘)
    })
})

隐藏显示切换 标签对象.slideToggle()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

$(‘[name="toggle"]‘).click(function(){
    $(‘div‘).slideToggle(1000, ‘linear‘ , function(){
        console.log(‘标签切换了‘)
    })
}) 

3.jQuery之动画详解–渐隐渐显

fadeIn(),fadeOut(),fadeToggle()

jQuery部分:
下拉 显示 / 出现 标签对象.fadeIn()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

$(‘[name="block"]‘).click(function(){
   $(‘div‘).fadeIn(1000, ‘linear‘ , function(){
       console.log(‘标签逐渐显示了‘)
   })
})

**上卷 隐藏 / 消失 标签对象.fadeOut() **
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

$(‘[name="none"]‘).click(function(){
    $(‘div‘).fadeOut(1000, ‘linear‘ , function(){
        console.log(‘标签逐渐隐藏了‘)
    })
})

隐藏显示切换 标签对象.fadeToggle()
参数1 : 毫秒 也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数 当运动结束时,执行的函数程序

$(‘[name="toggle"]‘).click(function(){
    $(‘div‘).fadeToggle(1000, ‘linear‘ , function(){
        console.log(‘标签切换了‘)
    })
}) 

原文地址:https://www.cnblogs.com/littlestarlx/p/12573864.html

时间: 03-26

详解jQuery动画的相关文章

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"

iOS动画详解(学习动画看这一篇就够了)

iOS动画详解(学习动画看这一篇就够了) 一.基础知识 CAAnimation.png 二.CABasicAnimation 1. 动画的属性和解释 2.属性值的解释 repeatCount : 如果在swift中需要一直不断重复:Float.infinity,OC:HUGE_VALF timingFunction: timingFunction.png kCAMediaTimingFunctionLinear--在整个动画时间内动画都是以一个相同的速度来改变.也就是匀速运动.一个线性的计时函数

android动画详解三 动画API概述

· 属性动画与view动画的不同之处 view动画系统提供了仅动画View 对象的能力,所以如果你想动画非View 对象,你就要自己实现代码. view动画系统实际上还被强制仅能对 View 的少数属性进行动画,比如缩放和旋转,而不能对背景色进行. view动画的另一个坏处是它仅修改View的绘制位置,而不是View的实际位置.例如,如果你动画一个移动穿越屏幕,button的绘制位置是正确的,但实际你可以点击它的位置却没有变,所以你必须去实现你自己的逻辑来处理它. 使用属性动画系统时,这个限制被

详解Qt动画框架(2)--- 实现网易云音乐tag切换

在详解Qt的动画框架(一)介绍了关于Qt动画框架一些基础知识,在这一节中,将会实际的看到有关与动画框架的实现,该案例主要实现的具体是网易云音乐tag的切换,网易云音乐中的切换如图所示: 本文介绍的方法也可以达到这种切换的简易效果. 设计动画框架 首先我们需要设计对于动画框架,其需要的动画效果是什么?对于上图,我们需要的是三个tag可以不停的切换,可以抽象为左移以及右移,即一个tag从一个矩形区域,移动到另外的矩形区域,那么对于Tag的承载体选为什么较为合适呢?因为我们仅仅只需要图片的显示,因此Q

Android图文详解属性动画

Android中的动画分为视图动画(View Animation).属性动画(Property Animation)以及Drawable动画.从Android 3.0(API Level 11)开始,Android开始支持属性动画,本文主要讲解如何使用属性动画.关于视图动画可以参见博文<Android四大视图动画图文详解>. 概述 视图动画局限比较大,如下所述: 视图动画只能使用在View上面. 视图动画并没有真正改变View相应的属性值,这导致了UI效果与实际View状态存在差异,并导致了一

瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)

瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介绍下概念和用法,然后详解这一功能的实现. 瀑布流概念: 又称瀑布流式布局,是比较流行的一种网站页面布局方式.视觉表现为多栏布局,附带筛选功能,当下在国内十分流行. 瀑布流原理: 通过为子元素定义不同的class类名,然后通过类名及其内容进行筛选排序.   这一插件在实现网站元素动态切换,调整整体顺序

jQuery:详解jQuery中的事件(一)

之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代码,但是自觉还差的好远,跟好多大神(比如阮一峰)的理解还是有很大差距.现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery. JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生

详解jQuery uploadify文件上传插件的使用方法

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript

详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别

转载自:http://zhuzhichao.com/2013/12/differences-between-jquery-bind-vs-live/ 我见过很多开发者很困惑关于jQuery中的.bind(), .live(), .delegate() 和 .on() 的使用以及它们的不同. 如果你没有耐心或者只想看到总结的话,请直接跳转到结尾. 在我们深入了解这些方法之前,先准备好HTML代码. [javascript] view plain copy <pre> <ul id=&quo

详解JQuery Ajax 在asp.net中使用总结

自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方,欢迎大家指正和补充. 本文将从Ajax请求aspx.ashx和asmx三种方式讨论. 首先看看请求aspx的情况 Aspx页面的Ajax请求可以有两种方式: 1. 通过使用get或者post方法,传递页面地址为url参数的值,并附带一些标记参数,直接请求.这种方式的Ajax被一些人誉为"假的Aja