CODEWITHSUNDEEP
javascriptjquery
cocoa coder
cocoa coder

Reputation: 214

jQuery Resizing Object

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 !

Upvotes: 1

Views: 421

Answers (1)

gilly3
gilly3

Reputation: 91637

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/

Upvotes: 2

Related Questions