1

コード：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {           
        $(document).keydown(function () {
            alert("hello");
            $('div').animate({ left: '+=10px' }, 500);
        });
    });

</script>
<style type="text/css">
div
{
     height: 50px; width: 50px; background-color: Red;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

キーを押すたびにdivを右に移動したいのですが、何らかの理由でこれはうまくいきません。「こんにちは」というアラートが表示されるので、animate ステートメントに小さな間違いがあり、それを理解できない可能性があります。

なぜこれが機能しないのか、正しい方法を教えてください。

前もって感謝します。:)

4

4 に答える 4

4

これは、左/上/右/下のプロパティが配置された要素にのみ適用されるためです。

したがって、div でposition:relative/を使用するか、代わりにアニメーション化する必要があります。（あなたが望む最終結果に依存します..）position:absolutemargin-left

スペックより引用

9.3.2 ボックス オフセット: ' top'、' right'、' bottom'、' left'

' position ' プロパティが ' static '以外の値を持つ場合、要素は配置されていると言われます。配置された要素は、4 つのプロパティに従ってレイアウトされた配置されたボックスを生成します。

于 2012-12-04T10:18:30.097 に答える
0

css で位置を相対に設定する必要があります。

position: relative;

このフィドルを見てください。

于 2012-12-04T10:22:38.670 に答える
0

解決策： 移動するには、最初に絶対または相対で配置する必要があります。

このような：

position: relative;
/* OR */
position: absolute;
于 2015-01-24T13:51:56.003 に答える
0

デモ

このコードを試してください:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {           
        $(document).keydown(function () {
            alert("hello");
            $('#tomove').animate({ left: '+=10px' }, 500);
        });
    });

</script>
<style type="text/css">
div
{
     height: 50px; width: 50px; background-color: Red; position:absolute; top:0; left:0;
}
</style>
</head>
<body>

<div id="tomove"></div>

</body>
</html>
于 2012-12-04T10:14:04.583 に答える