<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>JQuery实现的模块交换动画效果</title>
<meta name="Keywords" content="jquery,模块,交换,动画,javascript特效"/>
<meta name="Description" content="JQuery实现的模块交换动画效果。在模块交换过程中,设置模块position为absolute,实现交换。"/>
<script type="text/javascript" src="jquery-1.8.1.min.js""></script>
<style type="text/css">
div.container{position:relative;}
div.container .itemA,div.container .itemE{width:300px;height:100px;background:#aaa;}
div.container .itemE{background:#eee;}
div.container .itemA .btn,div.container .itemE .btn{text-align:right;}
</style>
<script type="text/javascript">
function addItem() {
var p = $('.container'), lastChild = p.children(":last");
p.append(lastChild.clone().attr('class', lastChild.attr('class') == 'itemE' ? 'itemA' : 'itemE'));
p.children(':last').append("--" + new Date().toLocaleTimeString());
}
function setItemPosition(dvContainer, isAB) {//更新子项的position和top
dvContainer.css('height', isAB ? dvContainer.height() : '');
var h = 0, eachItem;
dvContainer.children().each(function () {
eachItem = $(this);
eachItem.css({ 'position': isAB ? 'absolute' : 'relative', 'top': isAB ? h : '' });
if (isAB) h += eachItem.outerHeight(true);
});
}
$(function () {
$('#btnAdd').click(addItem);
$('.btn input').live('click', function () {
var o = $(this), pNode = o.parent().parent(), v = o.val();
switch (v) {
case '删除': if (pNode.parent().children().length < 2) alert('至少留有一项!'); else pNode.remove(); break;
case '上':
case '下':
var refNode = pNode[v == '上' ? 'prev' : 'next']();
if (refNode[0] == null) { alert(v == '上' ? '已经是第一位!' : '已经是最后一位!'); return false; }
setItemPosition(pNode.parent(), true);
var nItemTop = refNode.css('top'), refItemTop = pNode.css('top');
pNode[v == '上' ? 'after' : 'before'](refNode); //交换位置
pNode.animate({ top: nItemTop }, 300); ;
refNode.animate({ top: refItemTop }, 300, function () { setItemPosition(pNode.parent()); });
break;
}
});
});
</script>
</head>
<body>
<input type="button" value="添加新快" id="btnAdd"/>
<div class="container">
<div class="itemA"><div class="btn"><input type="button" value="删除" /><input type="button" value="上" /><input type="button" value="下" /></div>其他内容</div>
<div class="itemE"><div class="btn"><input type="button" value="删除" /><input type="button" value="上" /><input type="button" value="下" /></div>其他内容</div>
</div>
</body>
</html>

JQuery实现的模块交换动画效果的更多相关文章

  1. Jquery库自带的动画效果方法记录

    1.显示和隐藏hide()和show() <script type="text/javascript">             $(function() {      ...

  2. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  3. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  4. JQuery模拟实现天猫购物车动画效果

    测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...

  5. jQuery学习之旅 Item9 动画效果

    1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...

  6. JQuery插件 aos.js-添加动画效果

    原文地址:http://www.mamicode.com/info-detail-1785357.html 简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页 ...

  7. 【Demo】jQuery 轮播图简单动画效果

    功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...

  8. jQuery中的事件和动画效果

    刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...

  9. jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...

随机推荐

  1. 使用weave管理docker网络

    weave简介 Weave creates a virtual network that connects Docker containers deployed across multiple hos ...

  2. vlc 在ie11 中的addEventListener事件不触发

    在vlc控件中触发一事件,在IE11之前的版本使用attachEvent注册一个回调函数后IE11可以捕获到事件,但IE11中提示attachEvent不支持.经查询发现IE11已经去掉了attach ...

  3. Pychram如何导入Django项目

    最近在学Django,用GitHub来保存项目.但当从GitHub中clone出来后,Pycharm怎么来运行项目呢? 首先要对项目进行设置,使其能支持Django,具体设置如下: 在Pycharm中 ...

  4. 获取小众ftp服务器指定目录内容列表

    今天获取小众ftp服务器指定目录内容列表时费劲急了. ///parama url="ftp://x.x.x.x/dir_name" public string GetFTPDir( ...

  5. js产生随机数函数

    函数: //产生随机数函数 function RndNum(n){ var rnd=""; for(var i=0;i<n;i++) rnd+=Math.floor(Math ...

  6. tornado api 简单模板

    # 安装 pip insatll tornado # 主文件 web_server.py #!/usr/bin/env python # encoding: utf-8 import tornado. ...

  7. Python基础语法,基本数据类型及相关操作

    ---恢复内容开始--- python文件 文件开头要有  #!/usr/bin/ python        --在linux中是告诉系统phthon的路径是在/usr/bin/ python目录下 ...

  8. 使用Lamda生成函数

    #include <functional> int main() { std::function<]; ; i < ;i++ ) fn[i] = [=]() {return i ...

  9. 黑马程序员_ Objective-c 概述及面向对象与三大特性

    -----------android培训.java培训.java学习型技术博客.期待与您交流!------------ (一).语法概述 1. oc介绍:(.m文件) 1> c语言的基础上,增加 ...

  10. 新增资产时YTD折旧与累计折旧录入错误如何处理

    如新增资产时YTD折旧与累计折旧录入错误,但资产已入账处理,如何处理: 1.需要先报废资产: 2.需要在总账手工帐冲销未冲抵凭证: 3.重新增加资产,录入资产时YTD折旧及累计折旧金额应为0.