Question

I am trying to get this resizing object to work properly.

1. When MouseDown (holding), object resizes to 80px.

2. When release, I want the object to resize back to normal.

Problem:
As the object resizes from 100px to 80px on MouseDown, it may happen that the mouse is no more in the object itself, so releasing the mouse won’t trigger the “resize back to normal” animation again.

That’s why I tried to do a workaround with this:

 if (global.mouseup) and ($('#myimage').width('80px'))

Complete code at:
http://jsfiddle.net/G8Ste/568/

Thanks for any help !

Answer 1

Bind a mouseup handler to the document that resizes the img back to normal:

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.css({width:"",height:""});
    });
});

Working demo: http://jsfiddle.net/G8Ste/569/

A couple of notes about your code.

• You don’t have a global variable defined, so you are getting an error there.
• Instead of and, you must mean &&.

Edit: You can, of course, use the animation as you have in your original code. Demo here: http://jsfiddle.net/G8Ste/574/. The limitation of that is that you have to duplicate code, specifying the default width and height in the CSS and in the JavaScript. You can resolve that any number of ways, such as using the technique I describe in this answer, or using jQuery-UI’s .switchClass() and related methods. Example using jQuery-UI:

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().addClass("small", 50);
    $(document).one("mouseup", function(){
        img.stop().switchClass("small", "large", 150, function() {
            img.removeClass("large", 1000);
        });
    });
});

Demo: http://jsfiddle.net/G8Ste/576/