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");
   }

 );

Answer 2

Firstly, your selector is wrong:

$('.originalImg,rollOverImg').hover

Should be:

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

Second, your 'rollOverImg' overlaps the 'originalImg' when you call animate causing the "mouse out" portion of your hover event to fire. You want to put separate handlers on your original & rollover images:

$(".originalImg").mouseenter(function() {
  $(this).next().stop().animate({left: '0'}, 500, function(){});
});
$(".rollOverImg").mouseleave(function() {
  $(this).prev().stop().animate({left: '90px'}, 500, function(){});
});