jquery hover function

Question

var h=0;
var w=0;
    $(".extend").hover(function() {

        //alert(h);
        $(this).css({'z-index' : '999' });
        $(this).addClass("hover").filter(":not(:animated)").stop()
            .animate({
                marginTop: '-110px', 
                marginLeft: '10px', 
                top: '80%', 
                left: '80%',
                width: 387, 
                height: 487,
                padding: '0px' 
            }, 200);
         h=$(this).height();
         w=$(this).width();
        } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop()
            .animate({
                marginTop: '0', 
                marginLeft: '0',
                top: '0', 
                left: '0', 
                width:w,
                height:h,
                padding: '0px'
            }, 400);
    });

<img class="extend" src="a.jpg">
<img class="extend" src="b.jpg">

I have problem with my hover function i can't make the image back to original size if i hover it to a.jpg it expand then i hover over to b.jpg without waiting a.jpg to return to original size it will become bigger and bigger.

How i can hover and expand without shifting the size?

Musa · Accepted Answer · 2012-06-13 07:12:00Z

Unless you need your width and height to change, you should only set it once, assuming both images are the same size this should work

var h=$(".extend").height();
var w=$(".extend").width();
    $(".extend").hover(function() {

        //alert(h);
        $(this).css({'z-index' : '999' });
        $(this).addClass("hover").filter(":not(:animated)").stop()
            .animate({
                marginTop: '-110px', 
                marginLeft: '10px', 
                top: '80%', 
                left: '80%',
                width: 387, 
                height: 487,
                padding: '0px' 
            }, 200);
        } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop()
            .animate({
                marginTop: '0', 
                marginLeft: '0',
                top: '0', 
                left: '0', 
                width:w,
                height:h,
                padding: '0px'
            }, 400);
    });

FIDDLE

EDIT--
For images with different dimensions save them in the element using .data()

$(".extend").each(function(){
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
})
$(".extend").hover(function() {

    //alert(h);
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('width'),
            height:$(this).data('height'),
            padding: '0px'
        }, 400);
});

FIDDLE

EDIT-2-
A simple way to solve the shifting problem is to wrap the img tags in an inline-block element, set the elements dimensions to that of the image then make the img absolutly positioned

<span><img class="extend" src="a.jpg"></span>
<span><img class="extend" src="b.jpg"></span>

$(".extend").each(function(){
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
    $(this).parent().css({display:'inline-block', width: $(this).width(), height: $(this).height()})
    .end().css({position:'absolute'});
})
$(".extend").hover(function() {

    //alert(h);
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('width'),
            height:$(this).data('height'),
            padding: '0px'
        }, 400);
});

FIDDLE

It works but it still didn't solve the align problem when the image expand. The element beside the image will shift as the image expand. How to solve it? Thanks in advance.
this is strange it works on the fiddle but not on my webpage what is the possible problem? all my image is being shift to the top left of the frame.
It may be affected by the css on the webpage or there might be errors in the script on the page which stops execution, many other reasons

lucuma · Accepted Answer · 2012-06-13 05:11:31Z

0

Try it this way:

 $(".extend").hover(function() {

    //alert(h);
     h=$(this).height();
     w=$(this).width();
    $(this).css({'z-index' : '999' });
    $(this).data('width', w);
    $(this).data('height',h);
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    h=$(this).data('height');
     w=$(this).data('width');
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:w,
            height:h,
            padding: '0px'
        }, 400);
});

answered Jun 13, 2012 at 5:11

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

1 Comment

unammedkiller Over a year ago

tested not working when i shifting my mouse in and out super fast speed it get bigger and bigger.

Blender · Accepted Answer · 2012-06-13 05:11:38Z

0

Since w and h are globals, every time you hover a new element, they grow bigger and bigger.

Store them inside of the actual element using .data() attributes:

$(".extend").hover(function() {
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);

     $(this).data('original-height', $(this).height());
     $(this).data('original-width', $(this).width());

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('original-width'),
            height:$(this).data('original-height'),
            padding: '0px'
        }, 400);
});

answered Jun 13, 2012 at 5:11

Blender

300k55 gold badges462 silver badges512 bronze badges

1 Comment

unammedkiller Over a year ago

tested not working when i shifting my mouse in and out super fast speed it get bigger and bigger. my text beside it still being push to right

Collectives™ on Stack Overflow

jquery hover function

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related