Question

我想弄清楚如何让div滑动并在幻灯片的div后面显示内容。效果将使用车库的背景图像向上滑动div，并且当单击按钮时，车库“打开”并且窗体显示车库所在的位置。

到目前为止，我已经获得了车库图像的div以向上滑动并且其工作正常。代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("#garage").slideUp(1500);
  });
  $(".btn2").click(function(){
    $("#garage").slideDown(1500);
  });
});
</script>
<style>
#garage {
height:500px;
width:300px;
background-image:url(garage.jpg);
}
</style>
</head>
<body>

<div id="garage"></div>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

</body>
</html>

所以我的问题是我如何在车库div后面嵌入一个div，这样我可以显示一个已创建的表格？

此处的代码演示：http://reviewmypractice.com/slideup.html

Answer 1

表单容器上的绝对定位，以及z-index以确保它留在它后面。

HTML：

<div id="garage"></div>
<div id="formHolder">All the Form Stuff here.</div>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

CSS：

#garage {
  height:200px;
  width:200px;
  background-image:url(http://placehold.it/200x200);
}
#formHolder {
  position:absolute;
  top:50px;
  left:25px;
  z-index:-1;    
}

fiddle。

jQuery很好。应该注意，绝对定位是关于父母的。您可以将它全部包装在容器中，并将容器的位置设置为relative。

Answer 2

您需要在css中为 #garage 添加位置：绝对，这会使其位于您的表单顶部。因此它会向下滑动并在表单顶部向上滑动。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $(".btn1").click(function(){
        $("#garage").slideUp(1500);
      });
      $(".btn2").click(function(){
        $("#garage").slideDown(1500);
      });
    });
    </script>
    <style>
    #garage {
    height:300px;
    width:300px;
    background-image:url('http://reviewmypractice.com/garage.jpg');
    position:absolute;
    }
    #content {
    height:300px;
    width:300px;
    }
    </style>
  </head>
  <body>
    <div id="garage"></div>
    <div id="content">Your form comes here !!
    </div>
    <button class="btn1">Slide up</button>
    <button class="btn2">Slide down</button>
</body>
</html>

检查工作jfiddle

希望这有帮助。

div后面的内容与jquery一起滑动

2 个答案: