Question

我想让div从一边移动到另一边。就像当我点击菜单时，div来自右边，然后我点击下一个菜单，这个div左转，新的div来了。但我的职位有问题。 Div来自页面底部，然后出现在中心。我不知道如何解决它。

这是我的代码：

的index.html

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.custom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
  <ul>
    <li id= "home"><a href="#">Home</a></li>
    <li id= "about"><a href="#">About</a></li>
    <li id= "products"><a href="#">Products</a></li>
    <li id= "services"><a href="#">Services</a></li>
    <li id= "contact"><a href="#">Contact us</a></li>
  </ul>

  <div id = "newdiv"   style="height:400px; width:700px; background-color:red;    display:none;   margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv1"  style="height:400px; width:700px; background-color:blue;   display:none;   margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv2"  style="height:400px; width:700px; background-color:yellow; display:none;   margin-left:auto; margin-right:auto; "></div>
  <div id = "newdiv3"  style="height:400px; width:700px; background-color:green;  display:none;   margin-left:auto; margin-right:auto; "></div>

</body>
</html>

这是我的script.js。

$(document).ready(function(){

    $("#home").click(function() {
         $(".myclass").toggle("slide", { direction: "left" }, 2000).removeClass();
         $("#newdiv").addClass('myclass').toggle("slide", { direction: "right" }, 2000);
    });

    $("#about").click(function() {
        $(".myclass").toggle("slide", { direction: "left" }, 2000).removeClass();
        $("#newdiv1").addClass('myclass').toggle("slide", { direction: "right" }, 2000);
    });

    $("#products").click(function() {
         $(".myclass").toggle("slide", { direction: "left" }, 2000).removeClass();
         $("#newdiv2").addClass('myclass').toggle("slide", { direction: "right" }, 2000);
    });

    $("#services").click(function() {
          $(".myclass").toggle("slide", { direction: "left" }, 2000).removeClass();
          $("#newdiv3").addClass('myclass').toggle("slide", { direction: "right" }, 2000);
    });

});

Answer 1

在div上使用position:absolute。

像：

<div id = "newdiv" style=" position:absolute; height:400px; width:700px; background-color:red;    display:none;  position:absolute;  margin-left:auto; margin-right:auto; "></div>

JSFiddle

Jquery将div从右向左移动到正确的位置

1 个答案: