关于animate的问题.高人指点一下!
时间：2009-05-09
来源：互联网
今天做了一个测试.利用animate的LEFT属性将二个LI相互掉换位置后然后将任意一个LI隐藏,另外一个LI就窜位了.这是为什么?希望高人能指点一下.
作者: huboqiao 发布时间: 2009-05-09
上代码
作者: shawphy 发布时间: 2009-05-09
代码如下:
showAll:function(e){
var s = 0
for(var i=1;i<e.length;i++){
s++;
}
s = 750/s;
for(var j=1;j<s;j++){
e.eq(j).find('dd').animate({width:s+'px'}, "slow")
}
e.each(function(){
if(jQuery(this).attr('id')!=''){
jQuery(this).fadeIn( "slow")
}
})
},
hideThis:function(eT,e){
var parentLi = eT.parent().parent().parent();
var b=0;
for(var i=1;i<e.length;i++){
if(e.eq(i).css('display')!='none'){
b++;
}
}
if(b>2){
jQuery(parentLi).fadeOut(function(){
s = 0;
k = 0;
for(var i=1;i<e.length;i++){
if(e.eq(i).css('display')!='none'){
s += parseInt(e.eq(i).find('dd').css('width'));
k++;
}
}
if(s<750){
for(var i=1;i<e.length;i++){
var b = 750/k;
e.eq(i).find('dd').animate({width:b+'px'}, "slow");
}
}
})
}else{
alert('为了方便您对产品的比较,请务必保留二项.');
}
},
showAll:function(e){
var s = 0
for(var i=1;i<e.length;i++){
s++;
}
s = 750/s;
for(var j=1;j<s;j++){
e.eq(j).find('dd').animate({width:s+'px'}, "slow")
}
e.each(function(){
if(jQuery(this).attr('id')!=''){
jQuery(this).fadeIn( "slow")
}
})
},
hideThis:function(eT,e){
var parentLi = eT.parent().parent().parent();
var b=0;
for(var i=1;i<e.length;i++){
if(e.eq(i).css('display')!='none'){
b++;
}
}
if(b>2){
jQuery(parentLi).fadeOut(function(){
s = 0;
k = 0;
for(var i=1;i<e.length;i++){
if(e.eq(i).css('display')!='none'){
s += parseInt(e.eq(i).find('dd').css('width'));
k++;
}
}
if(s<750){
for(var i=1;i<e.length;i++){
var b = 750/k;
e.eq(i).find('dd').animate({width:b+'px'}, "slow");
}
}
})
}else{
alert('为了方便您对产品的比较,请务必保留二项.');
}
},
作者: huboqiao 发布时间: 2009-05-09
囧……
html呢？
css呢？
应该提供一个简化过的，最突出表现问题的代码片段，让人能快速进行测试并帮助你。
而不是泛泛的描述一个问题或是放上一点点无法测试的代码又或者丢上大把无关的代码。
这样做的好处是：
1，可能在你简化问题的过程中已经找到如何解决问题。
2，同学们可以更容易使用你提供的代码进行调试，使你的问题获得解答的几率大大增加。
3，便于其他同学从你的代码中学习。
html呢？
css呢？
应该提供一个简化过的，最突出表现问题的代码片段，让人能快速进行测试并帮助你。
而不是泛泛的描述一个问题或是放上一点点无法测试的代码又或者丢上大把无关的代码。
这样做的好处是：
1，可能在你简化问题的过程中已经找到如何解决问题。
2，同学们可以更容易使用你提供的代码进行调试，使你的问题获得解答的几率大大增加。
3，便于其他同学从你的代码中学习。
作者: shawphy 发布时间: 2009-05-09
....我用的是PHP的模版..如果全拿上来的话.有蛮长的啊.....帅哥.大佬.你能自己写一个实例吗?帮我测试一下.看你做的是不是也是这样?
作者: huboqiao 发布时间: 2009-05-09
还是把有效的代码贴出来点吧
作者: jackie 发布时间: 2009-05-09
引用
引用第4楼huboqiao于2009-05-09 15:33发表的 :
....我用的是PHP的模版..如果全拿上来的话.有蛮长的啊.....帅哥.大佬.你能自己写一个实例吗?帮我测试一下.看你做的是不是也是这样?
....我用的是PHP的模版..如果全拿上来的话.有蛮长的啊.....帅哥.大佬.你能自己写一个实例吗?帮我测试一下.看你做的是不是也是这样?
你还是没明白我说的话
有效提问的第一步：简化代码
简化代码有两个好处：1，可以帮助你自己分析出问题；2，利于他人迅速帮你找到问题。
当然不需要你提供一堆代码出来，让其他同学从你一堆代码中找到你的问题很不现实。
作者: shawphy 发布时间: 2009-05-09
我刚写了一个示例代码.
我想实现的功能:多列相互交换,隐藏指定示.
问题:交换好像有问题,而且隐藏后,会窜开.代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$('.swap').click(function(){
var a = $(this).parent().parent().parent();
swap(a,a.next());
})
$('.hideT').click(function(){
$(this).parent().parent().parent().hide();
})
})
function swap(e1,e2){
var p1 = e1.offset().left;
var p2 = e2.offset().left;
var eleThreeX = p2 - p1;
e1.animate({left:eleThreeX},'slow',function(){
});
e2.animate({right:eleThreeX},'slow',function(){
});
}
</script>
</HEAD>
<style>
ul{list-style:none;}
ul li{float:left;border:1px solid #ccc;border-bottom:none;padding:0px;position:relative;}
ul li dl{padding:0;margin:0px -40px;}
ul li dl dd{border-bottom:1px solid #ccc;display:block;width:200px;height:40px}
</style>
<BODY>
<ul>
<li>
<dl>
<dd><a href="javascript:void(0)" class="swap">交换</a>| <a href="javascript:void(0)" class="hideT">隐藏</a></dd>
<dd>第一列</dd>
<dd>第一列</dd>
<dd>第一列</dd>
</dl>
</li>
<li>
<dl>
<dd><a href="javascript:void(0)" class="swap">交换</a>| <a href="javascript:void(0)" class="hideT">隐藏</a></dd>
<dd>第二列</dd>
<dd>第二列</dd>
<dd>第二列</dd>
</dl>
</li>
<li>
<dl>
<dd><a href="javascript:void(0)" class="swap">交换</a>| <a href="javascript:void(0)" class="hideT">隐藏</a></dd>
<dd>第三列</dd>
<dd>第三列</dd>
<dd>第三列</dd>
</dl>
</li>
</ul>
</BODY>
</HTML>
我想实现的功能:多列相互交换,隐藏指定示.
问题:交换好像有问题,而且隐藏后,会窜开.代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$('.swap').click(function(){
var a = $(this).parent().parent().parent();
swap(a,a.next());
})
$('.hideT').click(function(){
$(this).parent().parent().parent().hide();
})
})
function swap(e1,e2){
var p1 = e1.offset().left;
var p2 = e2.offset().left;
var eleThreeX = p2 - p1;
e1.animate({left:eleThreeX},'slow',function(){
});
e2.animate({right:eleThreeX},'slow',function(){
});
}
</script>
</HEAD>
<style>
ul{list-style:none;}
ul li{float:left;border:1px solid #ccc;border-bottom:none;padding:0px;position:relative;}
ul li dl{padding:0;margin:0px -40px;}
ul li dl dd{border-bottom:1px solid #ccc;display:block;width:200px;height:40px}
</style>
<BODY>
<ul>
<li>
<dl>
<dd><a href="javascript:void(0)" class="swap">交换</a>| <a href="javascript:void(0)" class="hideT">隐藏</a></dd>
<dd>第一列</dd>
<dd>第一列</dd>
<dd>第一列</dd>
</dl>
</li>
<li>
<dl>
<dd><a href="javascript:void(0)" class="swap">交换</a>| <a href="javascript:void(0)" class="hideT">隐藏</a></dd>
<dd>第二列</dd>
<dd>第二列</dd>
<dd>第二列</dd>
</dl>
</li>
<li>
<dl>
<dd><a href="javascript:void(0)" class="swap">交换</a>| <a href="javascript:void(0)" class="hideT">隐藏</a></dd>
<dd>第三列</dd>
<dd>第三列</dd>
<dd>第三列</dd>
</dl>
</li>
</ul>
</BODY>
</HTML>
作者: huboqiao 发布时间: 2009-05-11
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
