zoukankan      html  css  js  c++  java
  • jquery总结06-动画事件04-自定义动画

    .animate(params,[speed],[easing],[fn])

    params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0
    params:一组包含作为动画属性和终值的样式属性和及其值的集合
    speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
    fn:在动画完成时执行的函数,每个元素执行一次。


    这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

    而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

    $("#go").click(function(){
    $("#block").animate({
    "90%",
    height: "100%",
    fontSize: "10em",
    borderWidth: 10
    }, 1000 );
    });

    $aaron.animate({
    height: '50'
    }, {
    duration :2000,
    //每一个动画都会调用
    step: function(now, fx) {
    $aaron.text('高度的改变值:'+now)
    }
    })

    .stop( [clearQueue ], [ jumpToEnd ] )

    .stop(); 停止当前动画,点击在暂停处继续开始
    .stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
    .stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值

    1. stop():只会停止第一个动画,第二个第三个继续
    2. stop(true):停止第一个、第二个和第三个动画
    3. stop(true ture):停止动画,直接跳到第一个动画的最终状态 
  • 相关阅读:
    vue 中router-link下方的横线如何去除
    element-ui中如何去掉el-menu菜单栏中下划线
    vue中使用swiper做轮播页面,标题样式随着轮播页面改变而改变
    git pull失误提交
    通过计算机名获取本网段内电脑的IP地址和MAC地址
    C# 控件及常用设计整理
    TextBox控件中只输入整数的几种方法
    c#鼠标移动到Button 改变颜色
    C#编写条形码扫描
    C#编程中的crc16校验
  • 原文地址:https://www.cnblogs.com/wufangfang/p/6116868.html
Copyright © 2011-2022 走看看