Search code examples
jqueryjquery-uijquery-effects

jQuery UI size effect on hover then return to original size

I'm still learning javascript, jQuery and jQuery UI and I'm trying to do something that seems so simple:

Make a gray div box expand to a larger size on hover and remain at the new size while hovering and only return to original size when you move your mouse away.

Here is my code:

$("div").hover(
 // Mouse Over: Expand to 75 x 75
  function(){
    $(this).effect("size", { to: {width: 75,height: 75} }, 1000);
  },
  // Mouse Out: 50 x 50 is original size
  function(){
    $(this).effect("size", { to: {width: 50,height: 50} }, 500);
});

I know I am close but it doesn't quite work right. See my fiddle here http://jsfiddle.net/L496W/1/ . The box expands to the larger size but then shrinks back down while still hovering on it.

What am I doing wrong?

Also, would .toggle() help me here?

Thanks!

Solution

  • Use jQuery's .animate() method.

    $("div").hover(
  // Mouse Over
  function(){
    $(this).animate({width: 75,height: 75}, 1000);
  },
  // Mouse Out
  function(){
      $(this).animate({width: 50,height: 50}, 1000);
});

    jsfiddle