jQuery实现基本动画效果的方法详解

本文实例讲述了jQuery实现基本动画效果的方法。分享给大家供大家参考，具体如下：

animate()方法用于创建自定义动画

语法：

$(selector).animate({params},speed,callback);
  • params:必须 定义形成动画的CSS属性
  • speed:可选  规定效果的时常：slow,fast或毫秒
  • callback:可选  动画完成后所执行的函数名称。

jQuery animate()——操作多个属性

默认情况下，所有HTML元素的位置都是静态的，并且无法移动，如需对位置进行操作，记得首先把元素的CSS position 属性设置为 relative、fixed或absolute。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<br />
<br />
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

运行结果：

absolute是指绝对定位，即将对象从文档流中拖出，使用left,right,top,bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。

当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来。

Top的值表示对象上边框与浏览器窗口顶部的距离，bottom的值表示对象下边框与浏览器窗口底部的距离，两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将于原文档流位置一致，即垂直保持位置不变。

Left的值表示对象左边框与浏览器窗口左边的距离，right的值表示对象右边框与浏览器窗口右边的距离，两者同时存在时，只有Left起作用，如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

ralative是指相对定位，就是依据left,right,top,bottom等属性在正常文档中偏移位置。

当Position属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置。

Top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有Top起作用；

left的值表示对象相对原位置向右偏移的距离，right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有left起作用。

jQuery animate()——使用预定义的值

可以将属性的动画值设置成"show"、"hide"或者"toggle"

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate()——使用队列功能

jquery提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个animate()调用，jQuery会创建包含这些方法调用的"内部"队列。然后逐一运行这些animate调用。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>开始</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

运行结果：

eg：将<div>元素移到右边，然后增加文本的字号。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>开始</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">Tian</div>
</body>
</html>

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • JQuery动画animate的stop方法使用详解

    animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css

  • jQuery实现动画、消失、显现、渐出、渐入效果示例

    jQuery实现动画、消失、显现、渐出、渐入效果示例

    本文实例讲述了jQuery实现动画.消失.显现.渐出.渐入效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title></titl

  • jquery animate 动画效果使用说明

    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就

  • jQuery实现的淡入淡出图片轮播效果示例

    jQuery实现的淡入淡出图片轮播效果示例

    本文实例讲述了jQuery实现的淡入淡出图片轮播效果.分享给大家供大家参考,具体如下: 1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致) css部分: <style> * { padding: 0; margin:0; } ul { list-style: none; } .out { width: 640px; height: 270px; margin:50px auto; position: relative; } .out img{ width: 640px; heig

  • jQuery动画animate方法使用介绍

    复制代码 代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin

  • jQuery实现基本淡入淡出效果的方法详解

    jQuery实现基本淡入淡出效果的方法详解

    本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元素 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script

  • jQuery滑动效果实现方法分析

    jQuery滑动效果实现方法分析

    本文实例讲述了jQuery滑动效果实现方法.分享给大家供大家参考,具体如下: jQuery 滑动方法: 1.slideDown()方法:用于向下滑动元素 语法: $(selector).slideDown(speed,callback); 2.slideUp()方法:用于向上滑动元素 语法: $(selector).slideUp(speed,callback); 3.slideToggle()方法:可以在slideDown()与slideUp()方法之间进行切换. 语法: $(selector

  • jQuery实现切换页面过渡动画效果

    jQuery实现切换页面过渡动画效果

    直接为大家介绍制作过程,希望大家可以喜欢. HTML结构 该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进度条. <main> <div class="cd-index cd-main-content"> <div> <h1>Page Transition</

  • jQuery Animation实现CSS3动画示例介绍

    jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red").详细用法请参考jQuery 效果 - animate()方法和官方教程. 像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的.如translate(), ro

  • jQuery实现基本动画效果的方法详解

    jQuery实现基本动画效果的方法详解

    本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画 语法: $(selector).animate({params},speed,callback); params:必须 定义形成动画的CSS属性 speed:可选  规定效果的时常:slow,fast或毫秒 callback:可选  动画完成后所执行的函数名称. jQuery animate()--操作多个属性 默认情况下,所有HTML元素的位置都是静态的,并且无法移动,

  • Jetpack Compose实现动画效果的方法详解

    Jetpack Compose实现动画效果的方法详解

    目录 概述 低级别动画API animate*AsState 使用Animatable实现颜色变化效果 使用updateTransition实现颜色和圆角动画 rememberInfiniteTransition TargetBasedAnimation 自定义动画 AnimationSpec Easing AnimationVector 高级动画 概述 compose 为支持动画提供了大量的 api,通过这些 api 我们可以轻松实现动画效果 ps:这些 api 的原理与 Flutter 很接

  • Android Flutter实现GIF动画效果的方法详解

    Android Flutter实现GIF动画效果的方法详解

    目录 前言 交错动画机制 代码实现 Interval 介绍 总结 前言 我们之前介绍了不少有关动画的篇章.前面介绍的动画都是只有一个动画效果,那如果我们想对某个组件实现一组动效,比如下面的效果,该怎么办? staggered animation 这个时候我们需要用到组合动效, Flutter 提供了交错动画(Staggered Animation)的方式实现.对于多个 Anmation 对象,可以共用一个 AnimationController,然后在不同的时间段执行动画效果.这就有点像 GIF

  • vue实现购物车抛物线小球动画效果的方法详解

    vue实现购物车抛物线小球动画效果的方法详解

    本文实例讲述了vue实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,

  • js实现类似jquery里animate动画效果的方法

    本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

  • 使用jQuery和ajax代替iframe的方法(详解)

    iframe虽然好用,但是其弊端也很明显,一是它不能使用于响应式布局,iframe的使用必须指定高度,而响应式布局的高度兵分固定的.其次iframe不易被搜索引擎的爬虫解读,特别是iframe中嵌套iframe,这是会被搜索引擎认为是个死网站而被放过. 目前主流的应用都使用了ajax代替了iframe. html: <ul class="nav navbar-nav" id="indexMenu"> <li><a target=&quo

  • Android TextView渐变颜色和方向及动画效果的设置详解

    Android TextView渐变颜色和方向及动画效果的设置详解

    GradientTextView Github点我 一个非常好用的库,使用kotlin实现,用于设置TexView的字体 渐变颜色.渐变方向 和 动画效果 添加依赖 之前仓库发布在 jcenter,但是因为它即将不可用,近期已完成迁移.建议大家使用 mavenCentral 的配置. 使用 jcenter implementation 'com.williamyang:gradienttext:1.0.1' 使用 mavenCentral buildscript { repositories {

  • 微信小程序实现下拉刷新和上拉分页效果的方法详解

    目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2

  • jQuery Masonry瀑布流插件使用方法详解

    jQuery Masonry瀑布流插件使用方法详解

    用jQuery Masonry 插件创建瀑布流式的页面 我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法. 1.分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="http://jq22.qiniud

随机推荐