Question

我试图在jQuery中进行div移动（我几乎一无所知）除非我不尝试用另一个元素影响一个元素，否则它会起作用。

我想要的是#bodywrapperfloat在点击#clicken时移动。

我可以使用以下方式使#clicken移动：

<script type="text/javascript">
$(document).ready(function() {
    $('#clicken').click(function() {               
     $(this).animate({
       marginLeft: '-500px'        
      }, 400);
});                                          
});
</script>

我以为我可以把它改成：

<script type="text/javascript">
$(document).ready(function() {
    $('#clicken').click(function() {               
     $('#bodywrapperfloat').animate({
       marginLeft: '-500px'        
      }, 400);
});                                          
});
</script>

但是没有任何反应。我做错了什么？

这是完整的HTML：

<head>

 <meta http-equiv="Content-Type" content="text/html;CHARSET=ISO-8859-2">
<meta http-equiv="Generator" content="TigerII MiniPad (C)2001">

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="Stylesheet" type="text/css" href="css/style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {
    $('#clicken').click(function() {               
     $('#bodywrapperfloat').animate({
       marginLeft: '-500px'        
      }, 400);
});                                          
});
</script>



 <title>ThinkOne Initiative</title>
</head>
<body>
<div id="headergreen">
<div id="headerwrapper">
<div style="font-weight:500; display:inline-block;">think</div><div style="font-weight:300; display:inline-block;">One</div>
<div id="contactlink"><a href="#">contact</a></div>
</div>
</div>

<div id="bodywrapperfixed">
<div id="bodywrapperfloat">
<table id="ramka">
     <tr>
          <td>random text</td>
          <td><div id="bodywrapper">
<center>
<div id="texten"><div style="font-weight:300; display:inline-block;">Introducing the all-in-one entertainment system.</div><div style="font-weight:500; display:inline-block;">&nbsp;For everyone.</div></div>


<div id="textpl"><div style="font-weight:300; display:inline-block;">Przedstawiamy zintegrowany system rozrywki.</div><div style="font-weight:500; display:inline-block;">&nbsp;&nbsp;Dla wszystkich.</div></div>


<img src="imgs/xboxone.png">


<div id="texten"><div style="font-weight:300; display:inline-block;">Choose your version of the story:</div></div>


<div id="textpl"><div style="font-weight:300; display:inline-block;">Wybierz swoją wersją opowieści:</div></div>




<table id="linki">
<tr>
<td><div id="clicken">en</td>
<td><div id="clickpl">pl</td>
</tr></table>
</center>
</div></td>
          <td>random text</td>
     </tr>
</table>
</div>
</div>
</body>

这是链接：

http://ingame.lh.pl/thinkone/

Answer 1

包含大部分内容的“bodywrapper”div是“position：absolute”，试着让你的“bodywrapperfloat”div“position：relative”。然后，您将至少采取一些行动。

Answer 2

问题是您的内容位于position:absolute内且您的bodywrapperfloat是静态的，并且不能是最近的祖先，因此当它移动时，您的内容将不会随之移动。在您的情况下，当您移动body时，内容将会移动。

将position:relative添加到bodywrapperfloat，使其成为最近的祖先。因此，当它移动时，position:absolute内的内容会随之移动。

<div id="bodywrapperfloat" style="position:relative">

是jQuery级联？如果没有，为什么我的代码不起作用？

2 个答案: