如何使用div向右滑动到左以显示内容
[英]how to slide right to left using div to show content
问题描述
我看到一个小提琴。 当光标悬停在其上方时，它会从下往上动画。
如何更改它，以便在单击时从右到左进行动画处理，然后隐藏内容？ 当内容隐藏时，会有一个按钮，我可以单击以再次显示内容。
HTML
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<p>Hover over red div please!!</p>
</body>
</html>
CSS
.wrapper{
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
margin-top:200px;
color:white;
}
jQuery的
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){ $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});
3 个解决方案
解决方案1
1 2013-02-13 04:32:55
您需要进行2项更改。 首先调整样式表，使移动的div向左而不是向左移动：
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
left:-200px;
color:white;
}
然后更改javascript以响应单击，基于宽度并修改left属性。 注意，有一个切换方法的行为很像悬停，但是它已从jQuery中删除，因此您必须有一个跟踪状态的布尔值。
$(document).ready(function(){
var width = $(".inner").width();
var toggle = true;
$(".wrapper").click(function(){
if(toggle) {
$(".inner").stop().animate({left:0},1000);
} else {
$(".inner").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
这是更新的小提琴： http : //jsfiddle.net/qGVfp/30/
解决方案2
0 2013-02-13 04:37:28
.wrapper2{
background-color:blue;
width:400px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner2{
width:200px;
height:200px;
position:absolute;
background-color:black;
margin-left:400px;
color:white;
}
$(".wrapper2").hover(function(){
$(".inner2").stop().animate({marginLeft:200},1000);
//alert(innerHeigth)
},function(){
$(".inner2").stop().animate({marginLeft:400},1000);
});
});
解决方案3
0 2013-02-13 04:37:53
基本上，您只需要更改一些内容即可。
HTML
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<button id="btn">click</button>
</body>
</html>
CSS
.wrapper {
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner {
width:200px;
height:100px;
position:absolute;
background-color:black;
left:200px;
color:white;
}
脚本
var hidden = true;
$(document).ready(function(){
$("#btn").click(function() {
if(hidden) {
$(".inner").stop().animate({left:0}, 1000);
hidden = false;
}
else {
$(".inner").stop().animate({left:200},1000);
hidden = true;
}
});
});
这是用来显示此内容的小提琴： http : //jsfiddle.net/qGVfp/31/
如何将div内容左右滑动..？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.