<style>
ul{ margin-top: 100px; }
li {
float: left;
margin-left: 20px;
position: absolute;
top: 0;
margin-top: 100px;
}
</style> <ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul> <script>
$('li').each(function(index){
$this = $(this).index();
$('li').eq( $this ).css('left', $this + '20px' );
})
$('li').hover(function(){
shake( this, 'top', 20, function(){
alert('回调已完成')
} )
}) //抖动运动框架
function shake(obj, attr, speed, endFn){
if(obj.onoff) return; //当前的onoff=false
obj.onoff = true;
var pos = parseInt( $(obj).css(attr) );
var arr = []; //10,-10,8,-8,6,-6......
var timer = null;
var num = 0; for(var i = speed; i > 0; i -= 2){
arr.push(i,-i);
}
arr.push(0); //最后加上0 obj.timer = setInterval(function(){
$(obj).css(attr, arr[num]);
num++;
if(num === arr.length){
clearInterval(obj.timer);
endFn && endFn();//判断回调函数
obj.onoff = false;
}
},50)
}
</script>

这边穿梭进入演示空间

jQuery 抖动特效函数封装的更多相关文章

  1. jquery中ajax中post方法(多学习:洞悉原理,触类旁通)(函数封装思想)

    jquery中ajax中post方法(多学习:洞悉原理,触类旁通)(函数封装思想) 一.总结 1.多看学习视频:洞悉原理,触类旁通, 2.函数封装:$.post(URL,data,callback); ...

  2. jQuery版AJAX简易封装

    开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...

  3. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  4. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  5. jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数

    这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...

  6. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

  7. jquery的each()函数用法

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等 在javaScript开发过程中使用 ...

  8. [妙味JS基础]第九课:定时器管理、函数封装

    知识点总结 函数封装 回调函数 实例:抖动函数 获取当前的位置 通过数组来实现,一正一负,直到恢复成0为止. 当前位置与数组中各值相加

  9. jQuery Ajax 二次封装

    jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...

随机推荐

  1. 吴裕雄--天生自然 HADOOP大数据分布式处理:安装WinSCP

    下载安装包

  2. 【笔记】机器学习 - 李宏毅 - 4 - Gradient Descent

    梯度下降 Gradient Descent 梯度下降是一种迭代法(与最小二乘法不同),目标是解决最优化问题:\({\theta}^* = arg min_{\theta} L({\theta})\), ...

  3. jQuery - lable 取值、赋值

    取值 var val = $("#breakfastMonday").html(); 赋值 $("#breakfastMonday").html("v ...

  4. Uva10791 唯一分解定理模板

    唯一分解定理: Uva10791 题意: 输入整数n,要求至少两个正整数,使得他们的最小公倍数为n,且这些整数的和最小 解法: 首先假设我们知道了一系列数字a1,a2,a3……an,他们的LCM是n, ...

  5. Java文件与流测试

    import java.io.File; import java.io.InputStreamReader; import java.math.BigDecimal; import java.io.B ...

  6. svn error: "Previous operation has not finished; run 'cleanup' if it was interrupted"

    出现这种问题,有几个原因 1.本身文件确实是锁住了 2.之前clean up 过很多次,但是每次都可能以失败告终,造成work queue存在缓存队列 3.svn lock 有lock记录 以下是简单 ...

  7. 如何在php7.2/php7.3中安装mcrypt扩展?

    mcrypt 是php里面重要的加密支持扩展库,linux环境下该库在默认情况下不开启.window环境下,PHP>=5.3,默认开启mcrypt扩展.mcrypt扩展是mcrypt加密库的接口 ...

  8. 论文阅读笔记(十一)【ICCV2017】:Jointly Attentive Spatial-Temporal Pooling Networks for Video-based Person Re-Identification

    Introduction (1)Motivation: 当前采用CNN-RNN模型解决行人重识别问题仅仅提取单一视频序列的特征表示,而没有把视频序列匹配间的影响考虑在内,即在比较不同人的时候,根据不同 ...

  9. hdu 6182A Math Problem(快速幂)

    You are given a positive integer n, please count how many positive integers k satisfy kk≤nkk≤n.  Inp ...

  10. 如何处理pom文件中没有找到HUB检查到高危漏洞的依赖包

    最近使用HUB工具检查到maven工程中存在高危险漏洞,虽然定位到具体的引用包了,但是在pom文件中却没有发现该依赖包.此时,我们就需要用到这条命令mvn dependency:tree,该命令会将m ...