jquey动画

语法

$(selector).animate({params},speed,callback);
  • 必需的 params 参数定义形成动画的 CSS 属性。
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是动画完成后所执行的函数名称。

几个要点:

  • css属性值使用相对值
  • css属性使用预定义值("show"、"hide" 或 "toggle")
  • 动画队列

实例:

$("button").click(function(){
    $("div").animate({
        "left": "500px",
        "opacity": "0"
    }, "slow", function(){
        console.log("第一步");
    });

    $("div").animate({
        "top": "+=300px",
        "background-color": "yellow",
        "opacity": "1"
    }, "fast", function(){
        console.log("第二步");
    });

    $("div").animate({
        "left": "-=500px",
        "background-color": "purple"
    }, "slow");

    $("div").animate({
        "top": "0px",
        "background-color": "red"
    }, "fast");

    $("div").animate({
        "height": "hide"
    }, "fast");

});
时间: 2024-11-15 00:21:38

jquey动画的相关文章

jquey动画效果

jquery的事件没有on,js的有. 1.show()  显示  由小变大缓慢显示 <html lang="en"> <head> <meta charset="UTF-8"> <title>魔降风云变</title> <style> #box{ width: 200px; height: 200px; background-color: red; display: none; } </

PHP+JQUEY+AJAX实现分页

PHP+JQUEY+AJAX实现分页 HTML CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float:left;width:220px; height:260px; margin:2px} #list ul li img{width:220px; height:220px} #list ul li p{line-height:22px} #pagecount{width

移动端 动画函数 的 封装

移动端 单页有时候 制作只用到简单的css3动画即可,我们简单封装一下,没必要引入zepto框架. 上面图片对应的 js var leftsbox=document.getElementById("leftsbox"); var boxdiv=leftsbox.getElementsByTagName("div"); leftsbox.onclick=function(){ for(var i=0;i<boxdiv.length;i++){ var that=

*C#(WPF)--矩阵拖动和矩阵动画(拖动展开,不足动画效果)

最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行的,这个工具条主要功能是:一个工具条,可进行拖拉.可进行拖拉展开,可在拖动之后不足展开并反向继续展开剩下的部分: 一.[拖动]   拖动的核心代码是通过矩阵进行定位和拖动的,定位是以父容器为模板的.以下是核心代码(及效果图): 1 /// <summary> 2 /// 这里TitleBar代指最

android手机安全卫士、Kotlin漫画、支付宝动画、沉浸状态栏等源码

Android精选源码 轻量级底部导航栏 android手机卫士源码 android实现高仿今日头条源码 一个用Kotlin写的简单漫画App源码 android吐槽项目完整源码 实现可以滑动文字逐渐变色的TabLayout android实现将app隐藏加密功能的源码 android实现横向滚动的卡片堆叠布局 android仿支付宝的咻咻动画源码 android状态栏和沉浸式导航栏管理源码 Android优质博客 从BaseActivity与BaseFragment的封装谈起 这篇博客主要是从

如何解决IOS 动画中 Autolayout 与View Transforms的冲突

IOS 的动画放大与缩小,并非按照找它的中心点放大和缩小,而是左上角 .我分析了下原来是Autolayout 与View Transforms的冲突造成的. - (void) addSubviewWithZoomInAnimation:(UIView*)view duration:(float)secs option:(UIViewAnimationOptions)option { // first reduce the view to 1/100th of its original dimen

JS 实现无缝滚动动画原理(初学者入)

这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https://224137748.github.io/JS_warehouse/lunbo/domo.HTML源码:https://github.com/224137748/JS_warehouse/blob/master/lunbo/domo.HTML ps: 上面和下面的滚动进度是一致的,上面红色框是为了演

U3D帧动画的制作

1.打开动画编辑器(动画制作器!)windows标签下的Animation 2.点击新建一个动画,保存后进入动画编辑状态.注意新建后创建一个动画和控制器(animator Contrller),同时为当前物体添加一个animator组件. 3.选择添加property,可以选择让动画改变哪些参数. 本例中制作一个窗口打开和关闭的简单动画.通过缩放窗口大小来控制打开关闭的动画.所以添加一个Scale的参数. 4.先制作一个关闭的动画:第一帧的时候控制scale都为1,也就是正常大小.60帧的时候控

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi