<!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. 
						
  2. 基于jQuery CSS3鼠标点击动画效果
		
    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...
    
		
    3. 
						
  3. jquery使用CSS3实现文字动画效果插件Textillate.js
		
    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
    
		
    4. 
						
  4. JQuery模拟实现天猫购物车动画效果
		
    测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...
    
		
    5. 
						
  5. jQuery学习之旅 Item9 动画效果
		
    1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...
    
		
    6. 
						
  6. JQuery插件 aos.js-添加动画效果
		
    原文地址:http://www.mamicode.com/info-detail-1785357.html 简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页 ...
    
		
    7. 
						
  7. 【Demo】jQuery 轮播图简单动画效果
		
    功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...
    
		
    8. 
						
  8. jQuery中的事件和动画效果
		
    刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...
    
		
    9. 
						
  9. jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
		
    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Ajax服务请求原理 简单总结
			
    刚开始以为Ajax是一种新的语言,接触之后才知道,ajax是用于服务器交换数据并更新部分网页的Web应用程序的技术. 第一次看到Ajax请求代码时,感觉一脸萌逼,这些代码竟然把后台数据请求过来了,神奇 ...
    
			
    2. 
						
  2. 将JSON格式的时间/Date(2367828670431)/格式 转为正常的年-月-日 格式
			
    function formatDate(NewDtime) var dt = new Date(parseInt(NewDtime.slice(6, 19))); var year = dt.getF ...
    
			
    3. 
						
  3. bzoj4750: 密码安全
			
    Description 有些人在社交网络中使用过许多的密码,我们通过将各种形式的信息转化为 01 信号,再转化为整数,可以将这个 人在一段时间内使用过的密码视为一个长度为 n 的非负整数序列 A_1, ...
    
			
    4. 
						
  4. Angular中的Ajax
			
    //我们使用Ajax访问本地或者同域名下的数据或者文件module.controller('InTheatersController',['$scope','$http', function($sco ...
    
			
    5. 
						
  5. IE8下调用Active控件
			
    之前在IE6下运行正常的Active控件,浏览器升级到IE8后全部失效,并呈浏览器崩溃状. 网上搜了一圈得到如下解决方法: 1.设置信任站点 2.还需要在IE浏览器菜单 “工具>Internet ...
    
			
    6. 
						
  6. 浏览器内核控制Meta标签
			
    国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲染主流的网站,只有小量的网站通 ...
    
			
    7. 
						
  7. 如何自定义Flask中的响应类
			
    http://codingpy.com/article/customizing-the-flask-response-class/
    
			
    8. 
						
  8. iOS开发 － OC － 实现本地数据存储的几种方式二（直接使用sqlite）
			
    连接上一篇文章http://www.cnblogs.com/FBiOSBlog/p/5819418.html. 上一篇文章介绍了OC内部一些方法进行数据的本地存储,其中包括 NSUser类.Plist ...
    
			
    9. 
						
  9. Python基础篇【第7篇】: 面向对象(2)
			
    上一篇<初识面向对象>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公 ...
    
			
    10. 
						
  10. Installing Intellij IDEA sublime-text-2 on Ubuntu
			
    he installation on Linux is traditionally more complicated. I wonder why people complain about the l ...
    
			
    11.