1

jQueryでdivを動かそうとしましたが（ほとんど何も知りません）、ある要素を別の要素に影響させようとしない限り、機能します。

私が欲しいのは、#clicken がクリックされたときに #bodywrapperfloat が動くようにすることです。

以下を使用してクリックすると、#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 に答える