1

我试图在 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/

4

2 回答 2

2

包含大部分内容的“bodywrapper”div 是“position:absolute”，尝试将“bodywrapperfloat”div 设置为“position:relative”。然后你至少会得到一些动作。

于 2013-06-28T09:38:08.610 回答
2

问题是你的内容在里面position:absolute，你的内容bodywrapperfloat是静态的，不能是最近的祖先，所以当它移动时，你的内容不会随之移动。在您的情况下，当您移动 时body，内容将移动。

添加position:relative到您的bodywrapperfloat，使其成为最近的祖先。所以当它移动时，你里面的内容也会position:absolute随之移动。

<div id="bodywrapperfloat" style="position:relative">
于 2013-06-28T09:38:18.760 回答