0

divを左右に動かそうとしていますが、アニメーションが無視されているようです...間違っているアイデアはありますか？

JS：

$(document).ready(function(){            
    $(document).keydown(function (e) {
        var keyCode = e.keyCode || e.which,
        arrow = {left: 37, up: 38, right: 39, down: 40 };

        switch (keyCode) {

            case arrow.left: 
                $('#block').animate({"left": "-=1px"}, "slow");
            break;

            case arrow.right: 
                $('#block').animate({"left": "+=1px"}, "slow");
            break;
        }
    });
});

CSS：

body{
    font-family:arial, verdana;
    color:#000;
    font-size:12px;
}

#block {
    width:50px;
    height:50px;
    border:1px solid #ff0000;
}

http://jsfiddle.net/AeWEc/

4

2 に答える 2

2

あなた#blockをposition:absoluteまたはposition: relative、つまり、いくつかのプロパティを与えることを意味しpositionます。

#block {
    width:50px;
    height:50px;
    border:1px solid #ff0000;
    position:absolute
}

デモ

なぜなら、leftアニメーションleftでは要素のCSSプロパティを変更し、プロパティはCSSでleft機能するからpositionです。

于 2012-07-20T09:12:51.433 に答える
1

更新JSFiddleを確認してください：

body{
    font-family:arial, verdana;
    color:#000;
    font-size:12px;
}

#block {
    width:50px;
    height:50px;
    border:1px solid #ff0000;
    position:absolute;
    top:0;
    left:0;
}
于 2012-07-20T09:14:58.327 に答える