<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>效果没做对,绿色框应该是从右往左消失的,现在反了
而且总体感觉也不怎么对
<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>效果没做对,绿色框应该是从右往左消失的,现在反了
而且总体感觉也不怎么对
解决方案 »
- 求助jquery怎样固定这个位置
- Ajax中xmlhttp.responseText乱码问题,用尽了各种办法啊,各位大侠帮忙看看啊
- ext4.0国际化中文为何无效?
- 如何在IE7下 动态生成页面宽度
- 请各位大虾帮帮忙,js对table行的处理
- javascript中如何判断一个元素在form中是否存在????????
- javascript中的事件(或函数)的参数如何传递(诸如整型等)指针或者引用?
- 怎么实时显示textarea 里输入的字符个数?
- 怎样用javascript获取点击back按钮的消息?
- 请教一个Javascript的问题!(另有Javascript powerPoint教程相送)
- js获取php动态生成的id
- 无法计算表达式。被调用的对象已与其客户端断开连接
<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>
<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>
<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>