Jquery使用右位置从右向左移动div_Jquery

Jquery使用右位置从右向左移动div

jquery

Jquery使用右位置从右向左移动div,jquery,Jquery,我想让div从一边移动到另一边。就像当我点击菜单时，div从右边来，然后我点击下一个菜单，这个div向左，新的div来。但我在职位上有问题。div来自页面底部，然后出现在中间。我不知道怎么修理它这是我的密码： Index.html <!DOCTYPE html> <html> <head> <title>Untitled</title> <link rel="stylesheet" type="text/css" href="m

我想让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>

在div上使用

position:absolute

比如：

是的，谢谢你的回答。但是当我使用position:absolute时，它的工作原理完全不同。它不是从右向左，它只是出现，不是在中间，而是在左边。它也没有帮助：(

$(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);
    });

});

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