CODEWITHSUNDEEP
javascriptjquerycssscale
Vynce82
Vynce82

Reputation: 119

jquery scale scale function increases size exponentially

I have a function that i'm using to scale pictures up on mouse-enter and return to normal size on mouse-out. The problem is if i quickly mouse-out and then mouse-in before the picture is allowed to return to normal size then the picture will scale up ( x2.7) from whatever size it currently is at on the moment of the mouse-enter ( and will no longer return to its original size)....so it gets huge!! how would I stop the function from running until the img has first returned to its original size? go to vgtesting.co.nf ( dog walking tab) to see what i'm trying to do.

//to scale up on hover
$('#videoandmapwrap').on({
    mouseenter: function () {
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).stop(true, false).animate({
            width: (current_w * 2.7),
            height: (current_h * 2.7)
        }, 900);
    },
    mouseleave: function () {
        $(this).stop(true, false).animate({
            width: current_w + 'px',
            height: current_h + 'px'
        }, 400);
    }
}, 'img');

Upvotes: 0

Views: 329

Answers (3)

Frogmouth
Frogmouth

Reputation: 1818

Like my comment...

Your code seems valid. Only one thing is the two variables. They're not seems defined, and if the variables aren't defined they're limited on their scope (mouseenter function) and not in the other one mouseleave try to define the value globally.

var current_h,current_w; //add this line simply.
$('#videoandmapwrap').on({
    mouseenter: function () {
       //... your code
    }
}, 'img');

example: http://jsfiddle.net/Frogmouth/Ku2fH

Upvotes: 2

j.karlsson
j.karlsson

Reputation: 653

You problem is that you have a race condition where the different eventhandlers are competing with each other. One way to fix this would be to store the original size in the DOM when mouseenter is executed the first time and then always use this size when scaling instead of using the current size of the image.

Upvotes: 2

Thrash Bean
Thrash Bean

Reputation: 658

Use a flag that allows to size. When mouse enter - put the flag to false and whe leaves - true. So size the picter up to the flag. Hope this helps.

var flag = true;
// inside mouseenter function
if(!flag) return;
flag = !flag;

// and then in mouseleave function
flag = !flag;

Hope this is enough to consider it answer.

Upvotes: 1

Related Questions