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

What is the best way to place my website's logo in the top-left corner using html and css?

When the resolution changes, the text shifts away from the bar in CSS

Trouble with CSS in a WordPress theme utilizing a two-column layout

Developing a fresh Outlook email using a combination of javascript and vbscript

Ajax pagination does not update the currently active link

What is the best way to adjust the maxHeight within AccordionDetails and enable scrolling functionality?

How can I style the empty text in an ExtJS grid using CSS?

Vue transition not functioning properly when hovering over text for changes

Troubleshooting: CSS Animation Not Showing up on Screen

Issue with $http.get in fetching information from PHP server

Issue with Bootstrap navigation bar not displaying on iPad devices

JavaScript date formatting without using jQuery

Can anyone share tips on how to effectively center navbar link items with Bootstrap?

Excessive screen height causes the CSS box layout to overflow

Developing a dynamic slideshow using jQuery

Error: The 'length' property cannot be searched for using the 'in' operator

Creating a specific quantity of divs with JavaScript

Transferring identifier from ashx page to aspx label or hidden field

CSS button with folded corner illusion and dynamic transitions

Can we use ToggleClass to animate elements using jQuery?