3

私はhtmlとcssに比較的精通していますが、javascriptとjqueryには精通していません。divを斜めに移動させようとしていますが、機能しません。
これが私のコードです：

<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript"> 
$(document).ready(function(){
 $("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);​​​​​​​​​​​​​​​
});
</script>
<div id="box1"></div>
</body>
</html>

私はそれがおそらく本当に愚かなことを知っていますが、誰かが問題が何であるかを知っていますか？ありがとう！

4

4 に答える 4

4

最初にそれを作成するposition: absoluteかrelative、CSS で作成する必要があります。

#box{
    position: absolute;
}

$("#box1").animate({left: '+=150', top: '+=150'}, 1000);

そうそう、これをしてください：

$("div#box1")   //correct

それ以外の：

$("#box1 div")  //incorrect

デモ: http://jsfiddle.net/DerekL/bwg8R/

于 2012-06-18T04:15:35.407 に答える
1

leftを使用して何かをアニメーション化するにtopは、要素を配置する必要があります。または、それ以外の場合relative、要素に対して何もしません。absolutelefttop

ここで私の例を参照してください: http://jsbin.com/ayafup/edit#html,live

そして、あなたがやっているようにすべての子がその中にあるわけではなく、あなたの#box1要素を直接ターゲットにしてください。$(#box1)div$(#box1 div)

また、スクリプトを前に下に移動して、</body>パフォーマンスと一般的なプラクティスを向上させます。

于 2012-06-18T04:15:28.510 に答える
0

位置が設定された後に左と上が使用されるため、divに位置を与えます

<div id="box1" style="position:absolute;">s</div>

そしてジャバスクリプトで

$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);

する必要があります

$("#box1").animate({left: '+=150', top: '+=150'}, 1000);

前回は #box1 の子を選択していたので

于 2012-06-18T04:15:44.270 に答える
0

アニメーション効果について私が見つけた最良の解決策は次のとおりです.アニメーションがケーキを食べるようなものになるよりも、ブラウザの古いバージョンをサポートするための制約はありません..

これを試してみてくださいhttp://daneden.me/animate/

乾杯...！！！

于 2012-06-18T05:01:50.620 に答える