jquery - onload slideDown of a div, slideUp the div on button click

标签 jquery html css slidedown slideup

<分区>

我正在尝试加载 slideDown。当页面打开时,div 在 2 秒后自动 slideDown。 div 由响应图像和一个名为“z-indexed”的按钮组成。 现在我需要的是 slideUp 同一个 div。我正在使用下面的代码来做,但不适用于 slideUp。当我点击 z-indexed 按钮时没有任何反应。

我是 jquery 的初学者,我真的卡住了。请帮助我,你的努力将不胜感激,谢谢。

<html>
<head>
    <title>slideDown</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
           $("#mydiv").slideUp(1).delay(2000).slideDown('slow');
           $("#mybutton").click(function() {
               $("#mydiv").slideUp();      // i think here's the problem
           });
        });
    </script>
    <style type="text/css">
        img{
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h2>here is some text , you will see an image and a button, after 2 seconds. when you click on the button the div will slideUp.</h2>
    <div id="mydiv">
        <button id="mybutton">z-indexed</button>
        <img src="php.jpg">
    </div>
</body>
</html>

最佳答案

有两个问题:

  • 您忘记了选择器中的井号:$('mybutton').click...
  • 您正在尝试在它存在之前将点击处理程序附加到它

试试这个:

$(document).ready(function() {
    $("#mydiv").slideUp(1).delay(2000).slideDown('slow');
    $("#mybutton").click(function() {
        $("#mydiv").slideUp();      // i think here's the problem
    });
});

关于jquery - onload slideDown of a div, slideUp the div on button click,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49136099/

上一篇:css - SASS:在 index.js 中导入的 scss 不呈现(使用 create-react-app)

下一篇:html - CSS Ellipsis 仅适用于最后一项,元素是动态和内联的

相关文章:

html - flex 容器中元素的宽度取决于最后一个元素中的内容

html - 为什么 div 不适合基于嵌套跨度高度的高度

javascript - 卡在构建 'cart management' 系统

javascript - 使用 Jquery 将元素的 html 内容复制到另一个元素,不适用于复选框状态(选中、未选中)?

jquery - 如何在传递变量时使用jquery 'load'方法加载页面片段?

javascript - 如何以重力形式创建一个切换按钮,一旦在 WordPress 中从打开更改为关闭,该按钮就会卡住?

html - 使单选按钮的图像可点击

html - 使用 Angular 动态使用 XY 坐标将图像放在另一个图像上

html - 在网页中叠加三个div

html - 如何为复选框标签添加一致的左边距?