Перемещение div на mousemove внутри другого div

Question

Я пытаюсь сделать div, который находится внутри контейнера div, перемещается в противоположном направлении мыши по оси X (только слева и справа).

это то, что я до сих пор:

HTML

<div class="container"> 
    <div class="box"></div> 
</div> 

CSS

.container { width: 450px; height: 52px; border: 1px #000 solid; position: relative; } 
.box { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; right: 200px; } 

Jquery

$(document).ready(function(){ 
    $('div.container').mousemove(function(e){ 
     var x = e.pageX - this.offsetLeft; 
     if ($('div.box').css('right') <= '400') { 
      $('div.box').css({'right': x}); 
     } 
    }); 
}); 

JSfiddle - http://jsfiddle.net/eyalbin/qQmu7/49/

по какой-то причине функция перестает работать через пару секунд.

может кто-нибудь помочь, пожалуйста

Answer 1

Попробуйте это: JSFiddle

Вы писали

if ($('div.box').css('right') <= '400')

вместо

if (x <= 400)

:)

Answer 2

Это должно сделать это

$(document).ready(function(){ 
    $('div.container').mousemove(function(e){ 
     var x = e.pageX - this.offsetLeft; 
     if ((x <= 400)) { 
      $('div.box').css({'right': x}); 
     } 
    }); 
}); 

FIDDLE

Answer 3

$(document).ready(function(){ 
    $('div.container').on('mousemove',function(e){ 
    var x = e.pageX - this.offsetLeft; 

     $('div.box').css({'right': x}); 

    }); 
}); 

Проверить эту ссылку Работа мелкий чувак ...

Js Fiddle Demo

Answer 4

$('#parent .child').mousemove(function(e) { 


     var parent_x = this.offsetLeft; //get parent position 
     var parent_y = this.offsetTop;  

     var mouseX = e.pageX; //get mouse move position 
     var mouseY = e.pageY; 

     var boxPositionX = mouseX-parent_x+5; 
     var boxPositionY = mouseY-parent_y+5; 

     $('.hover-box',this).css({'top': boxPositionY,'left': boxPositionX}); 
    }); 

////// /// CSS

.hover-box{ 
    position:absolute; 
}