Hover image automatically hover out?

Question

the buttons are the six square images on top.

http://wthdesign.net/test/rollover/services.html

the code i use:

$( document ).ready(function() {

$('.originalImg,rollOverImg').hover(

  function () {
    $(this).next().stop().animate({left: '0'}, 500, function(){});
    console.log("in");
  },
  function () {
    $(this).next().stop().animate({left: '90px'}, 500, function(){});
    console.log("out");
  }

);

my html:

<div class="slicesBoxesTop"><img class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/mickslice1.gif" width="90" height="90" /></div> 
<div class="slicesBoxTop2"><img  class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/paulslice2.gif" width="90" height="90" /></div>
<div class="sliceTop3"><img  class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/mickslice2.gif" width="90" height="90" /></div>
<div class="sliceTop4"><img  class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/paulslice3.gif" width="90" height="90" /></div>
<div class="sliceTopbox5"><img  class="originalImg" src="images/home.png" /><img class="rollOverImg" src="http://makingdesign.com.au/images/mickslice3.gif" width="92" height="92" /></div>

For some reason it rollout automatically even when my cursor still in hovering the image.

Answer 1

problem: you have two selector in hover... $('.originalImg,.rollOverImg') so when you move your mouse to rollOverImg...the origninalImg mouseleave function is called ..

solution,

name all you divs with same class and use hover for entire <div> .not tested but this should work.

try this

html

<div class="slicesBoxesTop divClass"><img class="originalImg"..
<div class="slicesBoxTop2 divClass"><img class="originalImg" ...
 ..so on

jquery

$( document ).ready(function() {

$('.divClass').hover(
   function () {
       $(this).find('.rollOverImg').stop().animate({left: '0'}, 500, function(){});
     console.log("in");
   },
   function () {
     $(this).find('.rollOverImg').stop().animate({left: '90px'}, 500, function(){});
     console.log("out");
   }

 );