Question

jquery怎么实现左右滑动的问题

query部分
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#left").animate({width:0},"slow");

});
$("#show").click(function(){
$("#left").animate({width:200},"slow");
});
});
</script>

body部分
<div id="left" style="width:200px; background-color:#009900; float:left;"></div>
<div id="right" style="width:400px; background-color: #FF0000; float:left;"></div>
<div style="float:left">
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</div>
现在实现的效果是2个按钮，分别点击可以实现id="left"部分的显示和隐藏。可是我想要实现反复点击一个图片，id="left"部分显示和隐藏的效果该怎么写代码部分呢？

Answer 1

<script>
$(document).ready(function(){
$("#hide").click(function(){
if($("#left").css('width') == '200px'){
$("#left").animate({width:0},"slow");
$("#hide").val('显示');
}else{
$("#left").animate({width:200},"slow");
$("#hide").val('隐藏');
}

});
});
</script>

<div id="left" style="width:200px; background-color:#009900; float:left;"> </div>
<div id="right" style="width:400px; background-color: #FF0000; float:left;"> </div>
<div style="float:left">
<input id="hide" type="button" value="隐藏" />
</div>

追问

多谢参与！不过调试了下咋没效果呢？我想实现的效果主要由三块组成：页面由三块组成1.左侧id=left （宽度固定尺寸）2.中间图标 id=img1(open.jpg close.jpg) 3.右侧id="right" （宽度尺寸自适应）我要实现的动作：点击中间图标open.jpg会发生一下变化：左侧缩进；右侧向左自适应；中间图标变成close.jpg。再次点击：左侧伸出；右侧向右自适应；中间图标变成open.jpg

追答

你引入jquery了吗？

jquery怎么实现左右滑动的问题

$(document).ready(function(){
$("#hide").click(function(){
if($("#left").css('width') == '200px'){
$("#left").animate({width:0},"slow");
$("#hide").val('显示');
}else{
$("#left").animate({width:200},"slow");
$("#hide").val('隐藏');
}

});
});

Answer 2

<p>123456</p>
p标签不能绝对定位的，所以修改left是无效的
换成div
<div style="position:absolute;">123456</div>