按钮：假设这是您的按钮ID

Question

当隐藏的div消失时，我可以像幻灯片一样添加吗？我希望div在消失时滑动

像这样：

按下按钮
隐藏的div滑入
再次按下按钮
div滑向侧面消失

我该怎么做？

Answer 1

我建议您使用jQuery

Here是一个在jQuery中滑动的好教程。

Answer 2

以下是使用jQuery：

的一个非常简单的示例

<强> Check the JSFiddle:

<强> 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>

View the jQuery slideToggle docs here

<小时/> 如果您以前从未使用过jQuery，请查看：
http://learn.jquery.com/
http://thenewboston.org/list.php?cat=32（视频教程）

Answer 3

您可以使用jQuery或其他库来完成。您也可以编写自己的函数，但这需要一段时间。

Answer 4

jQuery函数slideUp（），slideDown（）和slideToggle（）可以帮助你。

Answer 5

如果想要使用纯JavaScript进行此操作，则需要进行一些编码，或者您可以使用jquery并使用动画中的烘焙。

http://api.jquery.com/animate/

Answer 6

按钮：假设这是您的按钮ID

数据：要播放的div

//include jquery

$(document).ready(function(){
 $('#button').click(function(){
  $('#data').toggle('slow',function(){ });
 )};
});

我可以在按下按钮时向隐藏的div添加幻灯片吗？

6 个答案:

按钮：假设这是您的按钮ID

数据：要播放的div