The concept of the "Centering Effect" refers

Question

The concept of the "Centering Effect" refers

Check out the code I have below:

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

I want the effect to expand in all directions, not just to the right and bottom.

I've experimented with margin: 0, auto, and other CSS and HTML styles to center it, but nothing seems to be working.

Appreciate any help!

jquery html css

Answer 1

Answer №1

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        left: ['30px', 'swing'],   // calculate new left position
        top: ['60px', 'swing'],    // calculate new top position
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.stop().animate({
            left: ['-5px', 'swing'], // reverse back to original left position
            top: ['25px', 'swing'],  // reverse back to original top position
            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 apply the same functionality to all images with the class myimage, follow these steps: Store the initial properties of all images by running this code 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 the 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");

// continue with the rest of the code as shown in the previous example

.

Answer 2

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        left: ['30px', 'swing'],   // calculate new left position
        top: ['60px', 'swing'],    // calculate new top position
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.stop().animate({
            left: ['-5px', 'swing'], // reverse back to original left position
            top: ['25px', 'swing'],  // reverse back to original top position
            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 apply the same functionality to all images with the class myimage, follow these steps: Store the initial properties of all images by running this code 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 the 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");

// continue with the rest of the code as shown in the previous example

.

Answer 3

Answer №2

If you want to center one box inside another and keep it centered when resizing the parent container, you can achieve this effect by using negative margins. Simply set the margin of the inner box to half of its width/height for the desired centering effect.

Check out this jsFiddle for an example.

In an update, I have added functionality for relative sizing in the jsFiddle. You can now adjust the scale of the box based on percentages defined in the code. This approach allows for dynamic scaling based on mouse events.

Take a look at the revised jsFiddle here.

I have further improved the code to handle multiple quick clicks without causing animation glitches. The script now waits for the previous animation to finish before starting a new one.

See the updated jsFiddle here.

For even more responsiveness, the code has been turned into a plugin called "centeringEffect." You can use it by calling $('IMAGES').centeringEffect();

Options:

scaleDown: Specifies the percentage at which the image should scale down to on mouseDown (Default: .6)

scaleUp: Specifies the percentage at which the image should scale up to on mouseUp (Default: .6)

Answer 4

If you want to center one box inside another and keep it centered when resizing the parent container, you can achieve this effect by using negative margins. Simply set the margin of the inner box to half of its width/height for the desired centering effect.

Check out this jsFiddle for an example.

In an update, I have added functionality for relative sizing in the jsFiddle. You can now adjust the scale of the box based on percentages defined in the code. This approach allows for dynamic scaling based on mouse events.

Take a look at the revised jsFiddle here.

I have further improved the code to handle multiple quick clicks without causing animation glitches. The script now waits for the previous animation to finish before starting a new one.

See the updated jsFiddle here.

For even more responsiveness, the code has been turned into a plugin called "centeringEffect." You can use it by calling $('IMAGES').centeringEffect();

Options:

scaleDown: Specifies the percentage at which the image should scale down to on mouseDown (Default: .6)

scaleUp: Specifies the percentage at which the image should scale up to on mouseUp (Default: .6)

Answer 5

Answer №3

The current easing effect being employed is the swing variation. Unfortunately, no pre-existing easing effects fit the criteria you're looking for. One potential solution could be creating a custom easing effect modeled after the swing algorithm.

Answer 6

The current easing effect being employed is the swing variation. Unfortunately, no pre-existing easing effects fit the criteria you're looking for. One potential solution could be creating a custom easing effect modeled after the swing algorithm.

Answer 7

Answer №4

To achieve the desired animation effect, it seems like adjusting the left and top margins will be necessary. You could try implementing a script similar to 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');
        });
    });
});

Please note that the specific values provided in the code may not be accurate for your particular situation.

Answer 8

To achieve the desired animation effect, it seems like adjusting the left and top margins will be necessary. You could try implementing a script similar to 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');
        });
    });
});

Please note that the specific values provided in the code may not be accurate for your particular situation.

Answer 9

Answer №5

It seems like the best option for you would be to implement Scale for your needs

Answer 10

It seems like the best option for you would be to implement Scale for your needs

Answer 11

Answer №6

Visit this link to see the code in action

The CSS has been updated from left:20px; to left: 50px; To calculate the center, use the formula width/2 + top or left (this value should remain constant)

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

Answer 12

Visit this link to see the code in action

The CSS has been updated from left:20px; to left: 50px; To calculate the center, use the formula width/2 + top or left (this value should remain constant)

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

The concept of the "Centering Effect" refers

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Swap out periods with commas in the content of Json Data

Is it possible for CSS in React to cause the vanishing of all buttons

"Sending image data in base64 format to a server: A step-by

Implementing a feature to automatically set the datepicker value to the selected date upon page initialization

The Ajax call was successful but the callback function failed to return

How to Enhance Your MUI DataGrid Rows with Borders

Is it possible to have 3 divs with the height of the tallest

Content within iframe is failing to load correctly on both Firefox and Internet Explorer browsers

Incorporating invisible surprises into a fixed menu that reveal themselves as you scroll

Trimmed scrollbar and border in Webkit

Preventing Jquery Append from Adding Previous Elements

Angular Pagination: Present a collection of pages formatted to the size of A4 paper

Extract data from nested JSON and populate a list with corresponding values

Tips for populating an array with boolean values when a checkbox change event occurs:

Interact with HTML Radio Buttons to Trigger Input Opening

Unlock the secrets of programming with the must-have guide to mastering variables

Implementing the React Router into a ReactJS project: Methods to prevent users from clicking on links within React-Router's <Link> component

Using ReactJS and Ruby on Rails to implement an AJAX delete request

What reasons could explain why the more efficient approach of offering an initial portion of data is not faster in practice?

Utilizing jQuery to effortlessly generate parent and child elements in a single function call