20322


■

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

[code]

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


CC BY-SA 3.0
2015-12-23T15:20:25.347
20318
2015-12-23T18:44:01.093
2015-12-23T15:24:33.033
3639
13780
question
javascript jquery jquery-ui
jQueryのanimate()メソッドが条件文の際にうまく動作しない。


  1. 条件文は逆でないですか？(記載内容とコード上の動きが逆の気がします。)
  2. mousemoveイベントは絶え間なく発生しますので、このままだとanimate中にanimateさせることになってうまく動きません。
[code]     if($('#box1').is(':animated')) return;

    
[/code]

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

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

[code]

    $(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'
            });
        } 
    });
[/code]

[code]

    #box1 {
      position: absolute;
      left: 100px;
      background-color: red;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="box1">
    Hello
    </div>
[/code]


CC BY-SA 3.0
2015-12-23T18:33:42.387
20322
2015-12-23T18:44:01.093
2015-12-23T18:44:01.093
6092
6092
20318
answer