0

アニメーション化された div を div 内に配置しています。この div が親のスペース内で移動できるようにしたいだけです。どうすればそれを行うことができますか？

簡単に言うと、フロッガーにカエルを入れたいということです。

HTML

<div id="frogger">                          <!-- Animate start -->
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
    <div id="frog">
    </div>
</div>                                      <!-- Animate end -->

CSS

#frogger
{
    width: 500px;
    height: 500px;
    border: solid;
    margin: 0 auto;
}

#frog
{
  position:relative;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}

Javascript

$("#right").click(function(){
    if ($(':animated').length) {
        return false;
    } else {
        $("#frog").animate({"left": "+=50px"}, {queue: false}, "slow");
    }   
});

$("#left").click(function(){
    if ($(':animated').length) {
        return false;
    } else {
        $("#frog").animate({"left": "-=50px"}, {queue: false}, "slow");
    }
});
4

2 に答える 2

0

1つの方法は、現在の位置をテストし、エッジに近すぎる場合は移動しないことです。

var $frog = $("#frog");

$("#right").click(function(){
    if (parseInt($frog.css('left')) >= 400 || $(':animated').length) {
        return false;
    } else {
        $frog.animate({"left": "+=50px"}, {queue: false}, "slow");
    }   
});

$("#left").click(function(){

    if (parseInt($frog.css('left')) < 50 || $(':animated').length) {
        return false;
    } else {
        $frog.animate({"left": "-=50px"}, {queue: false}, "slow");
    }
});

デモ： http： //jsfiddle.net/n3NgY/

もちろん、プログラムでカエルとそのコンテナの幅を決定することで、これをもう少し堅牢にすることができますが、簡単なデモのために、適切な左右の境界番号をハードコーディングしました。

于 2012-05-31T04:46:42.130 に答える
0

ええ、あなたは少し簡単な衝突検出をする必要があるでしょう、残念ながらCSSだけではこれをすることはできません。しかし、次のように動的に行うことができます。

$("#right").click(function(){
    var frog_right = $("#frog").offset().left + $("#frog").width();
    var frogger_right = $("#frogger").offset().left + $("#frogger").width();

    if ($(':animated').length || frog_right >= frogger_right ) {
        return false;
    } else {
        $("#frog").animate({"left": "+=50px"}, {queue: false}, "slow");
    }   
});

$("#left").click(function(){
    var frog_left = $("#frog").offset().left;
    var frogger_left = $("#frogger").offset().left;

    if ($(':animated').length || frog_left <= frogger_left) {
        return false;
    } else {
        $("#frog").animate({"left": "-=50px"}, {queue: false}, "slow");
    }
});
于 2012-05-31T04:48:02.740 に答える