当前位置:  编程技术>jquery

jquery animate动画效果演示实例

    来源: 互联网  发布时间:2014-09-03

    本文导语:  先来了解下jquery中的animate函数: animate(params[,duration[,easing[,callback]]])     用于创建自定义动画的函数。     这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如...

先来了解下jquery中的animate函数:
animate(params[,duration[,easing[,callback]]])
    用于创建自定义动画的函数。

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

注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
运行以后,刷新下,主要远程js文件。

例子:
 

代码示例:





jQuery animate动画效果演示实例-http://www.

$(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(/blog_article/arrow.gif) no-repeat right -17px;
    font-weight:bold;
    color:#fff;
    border: 1px solid #669900;
    height:22px;
}

.arrow {
    background: #99CC00 url(/blog_article/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"这样的字符串值,则会为该属性调用默认的动画形式。

更多精彩内容,就在脚本学堂中的>>> jquery 教程栏目。
 



fdsfds
   

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




    
 
 

您可能感兴趣的文章:

  • jquery选择器排除某个DOM元素的方法(实例演示)
  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery照明效果插件 jQuery Photon
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery盖章效果插件 jquery.stamper
  • jQuery卷页效果 jQuery Page Peel
  • 链接渐变效果 jQuery glow
  • jQuery的效果集工具包 Glimmer
  • jQuery Lightbox效果插件 Boxer
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery电梯式滚动效果插件 Ascensor
  • jQuery 页面动画效果 Animsition
  • jQuery 幻灯片效果插件 plusview
  • jQuery图片效果切换 Adipoli
  • jQuery 幻灯效果显示插件 Diapo
  • jQuery文本效果插件 Textualizer
  • jquery获得表单所有数据的实例分享 iis7站长之家
  • jQuery轮盘效果插件 Roundabout
  • jQuery淡入淡出效果 InnerFade
  • jQuery图片缩放效果 FancyZoom
  • jQuery图片幻灯手风琴效果插件 Slidorion
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3