先引入jquery，这是肯定的。
然后准备好结构，设计思路有很多种，不嫌麻烦的话可以做复杂点的计算，可以让隐藏的效果做的更加逼真，大致思路就是定位，宽度和位置的同时变化。
在这里我介绍的是一个投机取巧的办法，俩框。
只需要用js来控制其left值即可。
测试通过，复制可用，望采纳。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.wrap{position: relative;width: 100px;height: 100px;border: 1px solid #ddd;overflow: hidden;}
.box{width: 100px;height: 100px;position: absolute;top: 0;left: 0;background: #d00;}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
<script>
$(function(){
$('.wrap').click(function(){
$('.box').animate({left:'100px'}, 500);
});
});
</script>
</body>
</html>
温馨提示：内容为网友见解，仅供参考
第1个回答 推荐于2017-09-01
弹出的DIV如果是绝对定位，就用right固定位子，如果不是就用float：right；
Jquery中有个函数animate是自定义动画效果，
$("#shou").click(function(){
$(this).animate( { width: 0}, 1000 );
});
这个表示，鼠标点击ID=shou的DIV宽度变成0，宽度为0也就相当于隐藏了，1000是从现有宽度变成0所花的时间。本回答被提问者采纳
Jquery中有个函数animate是自定义动画效果，
$("#shou").click(function(){
$(this).animate( { width: 0}, 1000 );
});
这个表示，鼠标点击ID=shou的DIV宽度变成0，宽度为0也就相当于隐藏了，1000是从现有宽度变成0所花的时间。本回答被提问者采纳
第2个回答 2012-08-31
绝对定位left属性设为0，如果要隐藏就设一个负值，如果现实就再变成0来自：求助得到的回答
第2个回答 2012-08-31
<style>
/* float cart */
.floatcart { position: fixed; top: 100px; right: -250px; z-index: 999; }
.floatcart-tab { width: 20px; text-align: center; padding: 25px 5px 10px; border-radius: 5px 0 0 5px; color: #fff; background-color: #D8D8D7; float: left; }
.floatcart-items { float: left; background: #4B2D17; min-height: 150px; width: 250px; border-radius: 0 0 0 5px; padding-bottom: 10px; color: #fff; }
</style>
</head>
<body>
<div class="floatcart clearfix">
<div class="floatcart-tab">测试</div>
<div class="floatcart-items">1111</div>
</div>
<script>
jQuery(document).ready(function($){
$(".floatcart").mouseenter(function(){
t = setTimeout(function(){
$(".floatcart").stop().animate({
right: "0"
}, 500);
}, 200);
}).mouseleave(function(){
clearTimeout(t);
$(".floatcart").stop().animate({
right: "-250px"
}, 500);
});
});
</script>
</body>本回答被网友采纳
/* float cart */
.floatcart { position: fixed; top: 100px; right: -250px; z-index: 999; }
.floatcart-tab { width: 20px; text-align: center; padding: 25px 5px 10px; border-radius: 5px 0 0 5px; color: #fff; background-color: #D8D8D7; float: left; }
.floatcart-items { float: left; background: #4B2D17; min-height: 150px; width: 250px; border-radius: 0 0 0 5px; padding-bottom: 10px; color: #fff; }
</style>
</head>
<body>
<div class="floatcart clearfix">
<div class="floatcart-tab">测试</div>
<div class="floatcart-items">1111</div>
</div>
<script>
jQuery(document).ready(function($){
$(".floatcart").mouseenter(function(){
t = setTimeout(function(){
$(".floatcart").stop().animate({
right: "0"
}, 500);
}, 200);
}).mouseleave(function(){
clearTimeout(t);
$(".floatcart").stop().animate({
right: "-250px"
}, 500);
});
});
</script>
</body>本回答被网友采纳
第3个回答 2016-01-21
$("#shou").click(function(){
$(this).animate( { width: 0}, 1000 );
});
$(this).animate( { width: 0}, 1000 );
});
相似回答
