我看到了一个小提琴。当光标悬停在它上面时,它从下到上进行动画处理。如何从右向左滑动使用div显示内容
我该如何改变它,以便在点击时,它会从右到左进行动画制作,然后,内容会被隐藏起来?当内容被隐藏时,会出现一个按钮,我可以点击该按钮让内容再次显示。
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);
});
});
,这里是小提琴http://jsfiddle.net/qGVfp/
这个点击是怎么样的,点击显示并再次点击隐藏 – 2013-02-13 05:03:00
@FrancisAlvinTan我更新了我的答案,它现在点击切换。 – 2013-02-13 14:04:32