语法结构
animate(params, speed, callback);
- params: 包含样式属性的映射。
- speed:速度参数,可选。
- callback:在动画完成执行的函数,可选。
实例
要实现一个功能,点击元素时,每次元素在300ms内向右移动100px。
点击前:
点击后:
jQuery:
$this.children('li').click(function(){
$(this).animate({left: "+=100px"},300);
console.log("ccc");
});
html:
<ul class="tabs">
<li class="tabs-li">
<a href="#" class="tab-li-a">欢迎使用</a>
</li>
</ul>
css:
.tabs li {
position: relative;
width: 100px;
}
.tabs .tab-li-a {
display: block;
margin: 1px;
float: left;
text-decoration: none;
color: white;
background-color: #0099cc;
padding: 5px 1em;
border: 1px solid #a1acb8;
}
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
版权声明:本文为博主原创文章,未经博主允许不得转载。
分享到:
相关推荐
主要介绍了jQuery自定义动画函数实现方法,形式实例分析了jQuery通过插件结合数学运算实现滑块动画运动的效果,并附完整demo源码供读者下载,需要的朋友可以参考下
animate(params, options) 返回值:jQuery 概述 用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或...
一个实用的实用的使用jQuery制作自定义动画横幅广告代码
本文实例讲述了jQuery使用动画队列自定义动画操作。分享给大家供大家参考,具体如下: jQuery的queue()方法和dequeue()方法配合使用,可以完成对函数队列的操作。 实现步骤: 1、新建一个函数数组,把动画函数依次放...
jQuery自定义Loading动画插件,可以自定义的加载(Loading)jQuery插件。
下面小编就为大家带来一篇深入理解jquery自定义动画animate()。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery自定义方向网页气泡提示框代码 jQuery+grumble.js自定义方向网页气泡提示框代码是一款可以将提示框放到它所围绕元素的任意角度的位置,多个grumble可以通过FX队列实现动画效果。
这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html,十分灵活...另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的。
非常简单的jquery遮罩层鼠标点击按钮放大展开动画弹出框 非常简单的jquery遮罩层鼠标点击按钮放大展开动画弹出框
一款十分简单的jQuery自定义数值数字滚动代码,设定默认数值,进入页面时自动动画滚动到该数值停止滚动。
通过 jquery animate 制作图片模向滑动特效,适用于展示图片太多的页面,通过点击左右方向按钮,滑动展示更多的图片。功能简单,在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。
主要介绍了jQuery中使用animate自定义动画的方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
本资源是jQuery专栏中文章【jQuery动画】停止动画、淡出淡出、自定义动画的源代码,实现效果在文章中噢~
jQuery自定义弹窗功能插件是一款jQuery基于animate css动画库,实现多种弹窗方式,可自定义对应弹出框代码。
jQuery+animate.css自定义弹窗动画插件,带有多种弹窗方式,具体看下方说明。
jQuery第3天知识点:jQuery 属性操作、jQuery三组基本动画、自定义动画animate.zip