0

以上のように四角い画像がleft:100px, top:0pxにあるとして、マウスのX軸の値が600pxより大きい時、
(600,0)にanimateで移動し、マウスが600よりも小さいエリアにあると、元の位置に戻るというコードを書いたのですが、(600,0)に移動した後もとに戻ってきません。
最近jQueryを勉強し始めたのですが、お手上げです。。。教えて頂けると幸いです。よろしくお願いたします。

$(window).on('mousemove', function(evt) {
    mouseX = evt.clientX;
    mouseY = evt.clientY;
    if(mouseX > 600){
        $('#box1').animate({
            left:'100px'
        });
    } else {
        $('#box1').animate({
            left:'600px'
        });
    } 
});

1 件の回答 1

2
  1. 条件文は逆でないですか?(記載内容とコード上の動きが逆の気がします。)
  2. mousemoveイベントは絶え間なく発生しますので、このままだとanimate中にanimateさせることになってうまく動きません。

    if($('#box1').is(':animated')) return;
    

     を入れて、animation中には判定を行わないようにしましょう。

  3. すでにleft: 100pxの時にもanimate({left: "100px"})してしまいますのでそれも避けましょう。

$(window).on('mousemove', function(evt) {
    mouseX = evt.clientX;
    mouseY = evt.clientY;
    if($('#box1').is(':animated')) return;

    if(mouseX < 400 && $("#box1").css("left") != "100px"){
        $('#box1').animate({
            left:'100px'
        });
    } else if(mouseX >= 400 && $("#box1").css("left") != "400px") {
        $('#box1').animate({
            left:'400px'
        });
    } 
});
#box1 {
  position: absolute;
  left: 100px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1">
Hello
</div>

1
  • うわーー!すごい!!!!本当にありがとうございます!ものすごく感謝です。Animateが沢山実行されてたんですね。。なんと。。
    – kotar0
    Commented 2015年12月24日 10:02

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。