jQuery animate效果演示

animate(params[,duration[,easing[,callback]]])
    用于创建自定义动画的函数。<br />
    这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。 
    注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 
    而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

运行以后,刷新下,主要远程js文件。

FV.Zone jQuery demos...

$(document).ready(function(){
$(".box h3").toggle(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
$(this).addClass("arrow");
return false;

},function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
$(this).removeClass("arrow");
return false;
});
});

/* 初始化样式 */
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}

h1 { margin: 42px 0 20px; font-size: 18px; text-align: center; }

.clear { clear: both; }
a { color:#000; text-decoration: none; }
a:hover { color:#999; text-decoration: none; }

body {
margin: 0 auto;
width: 960px;
background: #282c2f;
color: #d1d9dc;
font: 12px 'Lucida Grande', Verdana, sans-serif;
}

#layout {
margin: 0 auto;
width: 280px;
}

.text {
line-height: 22px;
padding: 0 6px;
color:#666;
}

.box h3 {
font-size: 12px;
padding-left: 6px;
line-height: 22px;
background: #99CC00 url(arrow.gif) no-repeat right -17px;
font-weight:bold;
color:#fff;
border: 1px solid #669900;
height:22px;
}

.arrow {
background: #99CC00 url(arrow.gif) no-repeat right 5px;
}

.box h3 a { color:#fff; }
.box h3 a:hover { color:#eee; }

.box {
position: relative;
background: #363C41;
border: 5px solid #4A5055;
}
.ar {
line-height: 22px;
position: absolute;
top: 3px;
right: 6px;
display: block;
width: 16px;
height: 16px;
}

jQuery demos animate(params[,duration[,easing[,callback]]])

fdsfds

animate(params[,duration[,easing[,callback]]])

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如"height"、"top"或"opacity")。

注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

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

fdsfds

在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题

    jQuery中animate()的方法 用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认的动画形式.paramsOptions一组包 含作为动画属性和终值的样式属性和及其值的集合 params 对象{},注意:所有指定的属性必须用骆驼形式,比如用margi

  • 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中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. animate()方法的使用: 方式一: 以"属性名/值"对象的方式定义动画终止样式属性.例如: 复制代码 代码如下: $("div").animate( {width:"1000px"}) 以上代码能够将div从原有的宽度调整到1000px.也可以一次性

  • jQuery动画animate方法使用介绍

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

  • jquery animate 动画效果使用说明

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

  • jQuery animate效果演示

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

  • jQuery animate和CSS3相结合实现缓动追逐效果附源码下载

    CSS3和jquery都可以实现缓动追逐效果,但是考虑到浏览器的兼容性,建议使用jquery animate方法来实现. 先给大家展示下实现效果如下: 效果演示        源码下载 引用文件: jquery-1.11.1.min.js html <div id="container"> <div id="first"></div> <div id="second"></div> &l

  • 原生js仿jquery animate动画效果

    jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40

  • jQuery复制表单元素附源码分享效果演示

    我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr

  • 浅谈jQuery animate easing的具体使用方法(推荐)

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: •properties:一组包含作为动画属性和终值的样式属性和及其值的集合 •duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

  • jQuery 动画效果代码分享

    一.显示.隐藏 jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显示内容和隐藏内容. $('.show').click(function(){ //设置个触发事件 $('#box').show(); //显示 }); $('.hide').click(function(){ //设置个触发事件 $('#box').hide(); //隐藏 }); 在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)

  • jQuery animate easing使用方法图文详解

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: • properties:一组包含作为动画属性和终值的样式属性和及其值的集合 • duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:100

  • jQuery动画效果实现图片无缝连续滚动

    本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 <body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <

  • jquery css 选择器演示代码

    效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所

  • jQuery动画效果相关方法实例分析

    本文实例讲述了jQuery动画效果相关方法.分享给大家供大家参考,具体如下: 1.show()显示效果 语法:show(speed,callback)  Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数. show(speed,[easing],callback)  Number/String  easing默认是swin

随机推荐