Animate elements with jQuery, moving them from the bottom right corner to the

Question

Animate elements with jQuery, moving them from the bottom right corner to the

I am currently working on a project to create a responsive webpage that involves clicking on a circle in the middle of the screen and having a div enlarge from the circle to the top left corner of the webpage. To achieve this effect, it seems like I would need to use a negative height value. I have spent considerable time searching online for a solution to this challenge, but so far have not been able to find one even though it seems like a common issue...

While the following code snippet is not operational, it gives an idea of what I am trying to accomplish:

$(".corner").click(function(){
    $(this).animate({width: '-400px', height: '-400px'}, 1000);
});

jquery css jquery-animate

Answer 1

Answer №1

It seems like there may be a glitch in your current approach, so I've devised an alternative solution. This method involves resizing the div to +400px by +400px and adjusting its position accordingly, as opposed to using negative values for width and height.

Below is the modified JS code based on your initial script:

$(".corner").click(function(){
    $(this).css({position: 'relative'});
    $(this).animate({right: '400px', bottom: '400px', width: '400px', height: '400px'}, 1000);
});

Additionally, here is a supplementary JSFiddle demonstrating the concept. In this example, I have used a square div instead of a circle and added margin to allow it to expand upwards and to the left. I hope this clarifies the concept for you.

I would appreciate your feedback on this approach.

Answer 2

It seems like there may be a glitch in your current approach, so I've devised an alternative solution. This method involves resizing the div to +400px by +400px and adjusting its position accordingly, as opposed to using negative values for width and height.

Below is the modified JS code based on your initial script:

$(".corner").click(function(){
    $(this).css({position: 'relative'});
    $(this).animate({right: '400px', bottom: '400px', width: '400px', height: '400px'}, 1000);
});

Additionally, here is a supplementary JSFiddle demonstrating the concept. In this example, I have used a square div instead of a circle and added margin to allow it to expand upwards and to the left. I hope this clarifies the concept for you.

I would appreciate your feedback on this approach.

Answer 3

Answer №2

If you want to achieve this,

$(".box").click(function(e){
    $new_width = $(e.target).width() + e.clientX;
    $new_height =  $(e.target).height() + e.clientY;
    $(e.target).animate(
        { top:0, left:0, width: $new_width, height: $new_height }, 1000
    );
});

Check out this example on jsfiddle

Answer 4

If you want to achieve this,

$(".box").click(function(e){
    $new_width = $(e.target).width() + e.clientX;
    $new_height =  $(e.target).height() + e.clientY;
    $(e.target).animate(
        { top:0, left:0, width: $new_width, height: $new_height }, 1000
    );
});

Check out this example on jsfiddle

Animate elements with jQuery, moving them from the bottom right corner to the

Answer №1

Answer №2

Similar questions

Employing Bootstraps data-spy and data-toggle features with a button

What is the best way to connect added elements together?

What is the best way to utilize data attributes of select options when applying a jQuery filter?

The alignment of the label button within the form-group is being set to the top

Entire body encompassing table

Vertically center the container

Achieving perfect alignment both horizontally and vertically using CSS3's viewport height of 100%

Guide to setting up collapsible sections within a parent collapsible

Repeater embedding a Div

Automatic Clicks in the Chrome Console

Retrieving Files using Ajax Across Different File Types

Using CSS to create hover effects for specific classes of elements

Information flows from the Bootstrap 4 template

What could be causing the overlap of my input box with its parent container?

Why are the links in the navgoco slide menu failing to function properly?

In IE9, the margin: auto property does not effectively center a div element

jQuery: Function is not running as expected

What is the best way to "leap" a sole transform value within an animation?

Revamp website to meet modern Web 2.0 standards

The jQuery event handler fails to activate on the initial page load, however, it functions properly after refreshing the page and inspecting the DOM