详解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 L——Material Design详解(动画篇)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习Android L了! 关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章: A

[转]ANDROID L——Material Design详解(动画篇)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/details/40187203 Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习

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状态存在差异,并导致了一

HTML5动画效果视频详解 Html5动画视频教程

课程目录:01.HTML5公开课03期-HTML5动画详解-第1讲:rotate旋转.wmv02.HTML5公开课03期-HTML5动画详解-第2讲:scale缩放.wmv03.HTML5公开课03期-HTML5动画详解-第3讲:skew扭曲.wmv04.HTML5公开课03期-HTML5动画详解-第4讲:translate平移.wmv05.HTML5公开课03期-HTML5动画详解-第5讲:transition案例(一).mp405.HTML5公开课03期-HTML5动画详解-第6讲:tran

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

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