Question

i want image move on hover with condition :

- image move away from mouse for 100px to right if mouse come from left side and vice versa.
- image can continuously move to one direction, when hit #div boundary will move to opposite istead.

i hardly figure it out to combine it, here my basic code:

To move image on hover

$(document).ready(function()
{  $("#image").mouseover(function()
   {  $("#image").animate({left:'250px'});
   });
});

To catch mouse positin on hover

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})

.Any help would be appreciated. Thanks

Answer 1

You could put your image in a div padded by 1px wide border divs. Attach the mouseover listener to each of these, for example the left entry listener to the left div, the right entry listener to the right div and so forth.

HTML:

<div id="box" style="background:#98bf21;height:100px;position: absolute;left:100px; width:200px;">
<div id="skinDiv">
    <div id="leftboundary"></div>
</div>
</div>

CSS:

#leftboundary{
    height:100%;
    width:20px;
    position:absolute;
    top:0px;
    right:0px;
    background:blue;
}

Here’s a short fiddle reused from a different question I answered: http://jsfiddle.net/PRZYN/10/

EDIT: Improved fiddle: http://jsfiddle.net/PRZYN/11/