关于jq左右滑动效果

一直被平均 2013-09-09 04:25:39
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#db1").click(function(){
if($("#db2").css('width') == '200px'){
$("#db2").animate({width:0},"slow");
$("#hide").val('显示');
}else{
$("#db2").animate({width:200},"slow");
$("#hide").val('隐藏');
}
});
});
</script>
<div style=" width:800px; height:600px; background:#CCCCCC; position:relative">
<div style="width:200px; height:30px; background:#00FF00; float:right; margin-top:40px;" id="db2">111</div>
<div style=" width:150px; height:100px; background:#006699; right:200px; top:20px; cursor:pointer; position: absolute" id="db1">点击<input type="hidden" id="hide" value="隐藏" /></div>
</div>


效果没做对,绿色框应该是从右往左消失的,现在反了
而且总体感觉也不怎么对
...全文
245 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
一直被平均 2013-09-10
  • 打赏
  • 举报
回复
引用 4 楼 fzfei2 的回复:
你 db1 是绝对定位,层次比db2前,如果你要求两个要交叠,只能把 db2也用绝对定位,不交叠就是把db1向左移些


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#db1").click(function(){
 
	if($("#db2").css('width') == '350px'){
		  $("#db2").animate({width:0  },"slow",function(){ $(this).hide() });
		  $("#hide").val('显示');
	}else{
		$("#db2").show().animate({width:350,display:'block'},"slow" );
		$("#hide").val('隐藏');
	} 
	
	
	
});
});
</script>
<div style=" width:800px; height:600px; background:#CCCCCC; position:relative; float:left">
<div style=" height:30px; background:#00FF00; margin-left:450px; width:350px; margin-top:40px;" id="db2">111</div>
<div style=" width:150px; height:100px; background:#006699; right:350px; top:20px; cursor:pointer; position: absolute" id="db1">点击<input type="hidden" id="hide"  value="隐藏" /></div>
<div style="clear:both"></div>
</div>
你说的很对,非常感谢
fzfei2 2013-09-10
  • 打赏
  • 举报
回复
你 db1 是绝对定位,层次比db2前,如果你要求两个要交叠,只能把 db2也用绝对定位,不交叠就是把db1向左移些


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#db1").click(function(){
 
	if($("#db2").css('width') == '350px'){
		  $("#db2").animate({width:0  },"slow",function(){ $(this).hide() });
		  $("#hide").val('显示');
	}else{
		$("#db2").show().animate({width:350,display:'block'},"slow" );
		$("#hide").val('隐藏');
	} 
	
	
	
});
});
</script>
<div style=" width:800px; height:600px; background:#CCCCCC; position:relative; float:left">
<div style=" height:30px; background:#00FF00; margin-left:450px; width:350px; margin-top:40px;" id="db2">111</div>
<div style=" width:150px; height:100px; background:#006699; right:350px; top:20px; cursor:pointer; position: absolute" id="db1">点击<input type="hidden" id="hide"  value="隐藏" /></div>
<div style="clear:both"></div>
</div>
一直被平均 2013-09-10
  • 打赏
  • 举报
回复
其实不用db2绝对定位,我在2楼写的改下宽度就行,不知道为啥我还整出个遮盖。。。 不过还是有点小问题,db2里的文字无法去掉。。难道要给清空?? 另外这么写对么??
fzfei2 2013-09-09
  • 打赏
  • 举报
回复
把db2 改成绝对定位

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#db1").click(function(){
   
	  if($("#db2").css('width') == '200px'){
		  $("#db2").animate({width:0},"slow");
		  $("#hide").val('显示');
	}else{
		$("#db2").animate({width:200},"slow");
		$("#hide").val('隐藏');
	} 
});
});
</script>
<div style=" width:800px; height:600px; background:#CCCCCC; position:relative">
<div style="width:200px; height:30px; background:#00FF00; position: absolute; left:600px;   margin-top:40px;" id="db2">111</div>
<div style=" width:150px; height:100px; background:#006699; right:200px; top:20px; cursor:pointer; position: absolute" id="db1">点击<input type="hidden" id="hide"  value="隐藏" /></div>
</div>
一直被平均 2013-09-09
  • 打赏
  • 举报
回复
通过把绿框加长,然后用蓝框遮盖,倒是能实现的了,不过,感觉还是有问题

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#db1").click(function(){
	  if($("#db2").css('width') == '350px'){
		  $("#db2").animate({width:150},"slow");
		  $("#hide").val('显示');
	}else{
		$("#db2").animate({width:350},"slow");
		$("#hide").val('隐藏');
	}
});
});
</script>
<div style=" width:800px; height:600px; background:#CCCCCC; position:relative; float:left">
<div style=" height:30px; background:#00FF00; margin-left:450px; width:350px; margin-top:40px;" id="db2">111</div>
<div style=" width:150px; height:100px; background:#006699; right:200px; top:20px; cursor:pointer; position: absolute" id="db1">点击<input type="hidden" id="hide"  value="隐藏" /></div>
<div style="clear:both"></div>
</div>

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧