JS向右弹出DIV，点击可向左隐藏。我用jquery可以从左下角像右上角隐藏，怎么从做向右隐藏呢？
6个回答
展开全部
先引入jquery，这是肯定的。
然后准备好结构，设计思路有很多种，不嫌麻烦的话可以做复杂点的计算，可以让隐藏的效果做的更加逼真，大致思路就是定位，宽度和位置的同时变化。
在这里我介绍的是一个投机取巧的办法，俩框。
只需要用js来控制其left值即可。
测试通过，复制可用，望采纳。
<!DOCTYPE html>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
弹出的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所花的时间。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
绝对定位left属性设为0，如果要隐藏就设一个负值，如果现实就再变成0
来自：求助得到的回答
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$("#shou").click(function(){
$(this).animate( { width: 0}, 1000 );
});
$(this).animate( { width: 0}, 1000 );
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
