当隐藏的 div 消失时,我可以像幻灯片一样添加它们吗?我希望 div 在它消失时滑动
像这样:
- 按钮按下
- 隐藏的 div 滑入
- 再次按下按钮
- div 滑动到一边消失
我怎样才能做到这一点 ?
当隐藏的 div 消失时,我可以像幻灯片一样添加它们吗?我希望 div 在它消失时滑动
像这样:
我怎样才能做到这一点 ?
这是一个非常简单的示例,使用jQuery
:
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Include the jQuery Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- Our DOM Structure for the javascript using jQuery -->
<div id="theDiv">This is a div!</div>
<button id="myButton">Click Me!</button>
</body>
</html>
Javascript:
<script type="text/javascript">
// When the page is ready and loaded
$(function(){
// On click of "myButton"
$('#myButton').click(function(){
// "slideToggle" the div
// ie: If hidden show it, else hide it
$('#theDiv').slideToggle();
});
})
</script>
//include jquery
$(document).ready(function(){
$('#button').click(function(){
$('#data').toggle('slow',function(){ });
)};
});
您可以使用 jQuery 或其他库来完成。您也可以编写自己的函数,但这需要一段时间。
jQuery 函数 slideUp()、slideDown() 和 slideToggle() 应该可以帮助您。
好吧,如果想用纯 javascript 来做这件事,那就需要一些编码,或者你可以使用 jquery 并使用烘焙的动画。