0

I have the following code:

http://jsfiddle.net/G8Ste/577/

But I would like the effect to go in all directions, instead of just to the right and bottom.

I already tried margin: 0, auto and other css and html styling, to align it to the center, but it doesn't work.

Thanks

3
  • use scale instead docs.jquery.com/UI/Effects/Scale
    – mgraph
    Feb 28, 2012 at 15:01
  • can't it be done using only jquery ? not jqueryUI ? Also with which functions "scale" is usable. In your ex. it uses hide and effect Feb 28, 2012 at 15:05
  • You just need to adjust the top/left values as well as width and height. Feb 28, 2012 at 15:06

6 Answers 6

3
$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        left: ['30px', 'swing'],   // left + (width - new width)/2
        top: ['60px', 'swing'],    // top + (height - new height)/2
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.stop().animate({
            left: ['-5px', 'swing'], // left - (new width - width)/2
            top: ['25px', 'swing'],  // top - (new height - height)/2
            width: ['150px', 'swing'],
            height: ['150px', 'swing'],
        }, 150, 'swing', function() {
            $(this).animate({
                left: ['20px', 'swing'],
                top: ['50px', 'swing'],
                width: ['100px', 'swing'],
                height: ['100px', 'swing'],
            }, 1000, 'swing');
        });
    });
});

http://jsfiddle.net/diode/G8Ste/598/

EDIT:

To make it work for all images with class myimage do as given below In the beginning store the initial properties of all images, by running this once

$(".myimage").each(function(i, img){ 

    $(img).data("width", $(img).width()); 
    $(img).data("height", $(img).height());
    $(img).data("left", parseInt($(img).css("left"),10)); 
    $(img).data("top", parseInt($(img).css("top"),10));

});

Then in mousedown handler

var img = $(this);

var ww = img.data("width"); 
var hh = img.data("height");
var left = img.data("left"); 
var top = img.data("top");

// then same code as last jsfiddle

.

11
  • Great contribution ! I tried this, and added left and top: jsfiddle.net/G8Ste/597 Any chance of making this relative to the object, e.g. % instead of using px ? Feb 28, 2012 at 15:50
  • we will have to give the width, height, left and top jsfiddle.net/diode/G8Ste/599
    – Diode
    Feb 28, 2012 at 16:12
  • Thank you very much. But I tried to get this really 100% relative, but I have difficulties setting the vars before the mousedown function, maybe in the document ready, but then we can't access the vars anymore. Else we can't get back to the normal size anymore on quick click. Could you please take a look ? jsfiddle.net/G8Ste/603 Feb 28, 2012 at 23:30
  • You are right.. we can set these vars outside the function.. But didn't get why you said that we couldn't access.. it works .. see jsfiddle.net/diode/G8Ste/604
    – Diode
    Feb 29, 2012 at 5:33
  • Either you have to make them global or declare in the same closure as the mousedown handler.
    – Diode
    Feb 29, 2012 at 5:35
0

The following jsFiddle will center one box inside of another and when being resized it will stayed centered within the parent container. I think this is the effect you are trying to achieve. I am using negative margins to keep the inner box centered. For whatever height/width you are using, just set the margin to half of the width/height.

http://jsfiddle.net/G8Ste/594/

EDIT:

I updated the above jsFiddle to handle relative sizing. There are 2 variables inside the mousedown function that determine the scale of the box. scaleDown is a percentage of the original size you want to scale down to on mouseDown and scale up is a percentage of the original size you want to scale up to on mouseUp. This should work for any sized box since all the values are calculated instead of hard coded.

http://jsfiddle.net/G8Ste/600/

EDIT2:

The code now checks if the box is being animated when clicked multiple times quickly. The code will wait until the previous animation is complete before animating again.

http://jsfiddle.net/G8Ste/601/

EDIT3:

http://jsfiddle.net/G8Ste/613/

Updated yet again to make it more responsive. I converted the code to a plugin called centeringEffect.

Usage

$('IMAGES').centeringEffect();

Options

scaleDown: The percentage you want the image to scale down to on mouseDown (Default: .6) scaleUp: The percentage you want the image to scale up to on mouseUp (Default: .6)

6
  • Great Example ! Thanks a lot ! Could you also make it use "relative" values, so we can use it in functions ? Using % works for the size, but how about the margins? Feb 28, 2012 at 15:58
  • thx but there's an issue when clicking the object quickly. It just keeps expanding Feb 28, 2012 at 16:39
  • Ah, that's because the orgWidth/orgHeight get reset. I can try and add something in to handle that
    – Tim Banks
    Feb 28, 2012 at 17:08
  • Updated to handle frequent clicks
    – Tim Banks
    Feb 28, 2012 at 17:15
  • Thank you very much, but the goal was to keep it responsive, e.g. not having to wait until the animation stops. I think Diode handled this pretty well. Feb 28, 2012 at 18:09
0

You are using the swing easing effect. There is no easing effect out of the box existing that has the behavior you want. The only way I see is that you write your own easing effect, that is based on the swing algorhythm.

0

You'll need to animate the left and top margins I think... something like this:

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
        marginTop: ['20px', 'swing'],
        marginLeft: ['20px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.stop().animate({
            width: ['150px', 'swing'],
            height: ['150px', 'swing'],
                marginTop: ['10px', 'swing'],
                marginLeft: ['10px', 'swing'],
        }, 150, 'swing', function() {
            $(this).animate({
                width: ['100px', 'swing'],
                height: ['100px', 'swing'],
                marginTop: ['15px', 'swing'],
                        marginLeft: ['15px', 'swing'],
            }, 1000, 'swing');
        });
    });
});

Note, the values I've typed are almost certainly not correct...

1
  • Tried this with top and left (margin does nothing), but it results in some strange jumping. Also I still don't know how I can center the div. jsfiddle.net/G8Ste/587 Feb 28, 2012 at 15:15
0

Looks like you should use Scale

2
  • can I use custom easing with scale as well ? Feb 28, 2012 at 15:15
  • Looks like this fiddle (jsfiddle.net/sk62Y/4) shows some examples... not entirely sure if that's along the lines of what you're looking for though.
    – Matt
    Feb 28, 2012 at 15:23
0

http://jsfiddle.net/AJ66C/2/

changed css from left:20px; to left: 50px; calculate center as width/2 + top or left (it should stay same all the time)

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.