CODEWITHSUNDEEP
jqueryhtmlcss
cocoa coder
cocoa coder

Reputation: 214

Centering Effect

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

Upvotes: 0

Views: 177

Answers (6)

Diode
Diode

Reputation: 25165

$('#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

.

Upvotes: 3

Tim Banks
Tim Banks

Reputation: 7189

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)

Upvotes: 0

Misha Ts
Misha Ts

Reputation: 431

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');
            });
        });
    });

Upvotes: 0

Matt
Matt

Reputation: 1911

Looks like you should use Scale

Upvotes: 0

Simon
Simon

Reputation: 5503

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...

Upvotes: 0

Sven Bieder
Sven Bieder

Reputation: 5681

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.

Upvotes: 0

Related Questions