美文网首页JavaScript
[JavaScript] $.fn.animate

[JavaScript] $.fn.animate

作者: 何幻 | 来源:发表于2016-03-05 08:10 被阅读7次
$(selector).animate(styles,speed,easing,callback);
$(selector).animate(styles,options);

用于执行自定义动画,通过CSS样式,将一个状态改变为另一个状态

例如:

$container.find('>span:first-child').animate({
    width:radius,
    height:radius,
    left:maxRadius/2-radius/2,
    top:maxRadius/2-radius/2
},interval,function(){
    $container.find('>span:first-child').animate({
        opacity:0
    },500,function(){
        loopAnimate.call($container,radius,interval,maxRadius,initRadius);
    });
});

注:
(1)只有数字属性值可以创建动画
(2)可以使用+=或者-=来创建“相对动画”
(3)使用$(selector).stop()可以停止动画
(4)使用$(selector).is(':animated')来判断是否正在执行动画

相关文章

  • [JavaScript] $.fn.animate

    用于执行自定义动画,通过CSS样式,将一个状态改变为另一个状态 例如: 注:(1)只有数字属性值可以创建动画(2)...

  • JavaScript-01

    A 什么是JavaScript JavaScript 定义JavaScript JavaScript基础语法 常用...

  • 锋利的 jQuery | 第1章_认识 jQuery

    一、JavaScript和JavaScript库 JavaScript简介 JavaScript是Netscape...

  • javascript学习思维导图

    JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流...

  • javaScript 基础知识

    javaScript 基础知识 一 JavaScript概述 JavaScript概述 JavaScript是客户...

  • JavaScript 基础

    JavaScript基础 JavaScript简介JavaScript对象 JavaScript简介 为什么使用j...

  • JS——Hoisting(提升)

    Javascript Hoisting的概念 Javascript Hoisting:In javascript,...

  • 2018-06-22

    javascript之路 01-认识JavaScript 初始JavaScript JavaScript是一种直译...

  • JavaScript基础

    JavaScript简介JavaScript变量JavaScript对象、函数JavaScript数字,字符串Ja...

  • JavaScript 学习脑图

    javascript数据类型 javascript变量 javascript运算符 javascript数组 ja...

网友评论

    本文标题:[JavaScript] $.fn.animate

    本文链接:https://www.haomeiwen.com/subject/mzenkttx.html