Create dynamic div animations triggered by changes in size of another div

Question

Create dynamic div animations triggered by changes in size of another div

Struggling to get this animation to function correctly.

I have a vertical scrolling page with various sized div elements that change based on the content. The problem is that when these size changes occur, the other elements are moving abruptly. I want to smooth out this transition.

This is part of a larger project (angular) and I cannot use any external libraries. I've created a jfiddle to demonstrate the issue.

$('.close').click(function () {
    $(this).parent().parent().height(0);
    $(this).parent().parent().slideUp(500);// in case if you want to move the second div up.

});

http://jsfiddle.net/zberQ/5/

In summary, the issue is not with the element whose height is changing. It's actually with the elements below it that are immediately adjusting in response to the height change.

javascript jquery html css angularjs

Answer 1

Answer №1

Initially, I removed the line $(this).parent().parent().height(0); - not sure if it's necessary.

After that, I eliminated a .parent in the remaining code, and now it appears smoother with just a margin jump.

Check out the demonstration on this fiddle:

https://jsfiddle.net/Hastig/zberQ/17/

Here's the JavaScript snippet:

$('.close').click(function() {
    $(this).parent().slideUp(400);
});

And here's the simplified CSS:

.publication1 {
    background: red;
    color: white;
}

.publication2 {
    background: green;
    color: white;
}

.publication3 {
    background: blue;
    color: white;
}

Answer 2

Initially, I removed the line $(this).parent().parent().height(0); - not sure if it's necessary.

After that, I eliminated a .parent in the remaining code, and now it appears smoother with just a margin jump.

Check out the demonstration on this fiddle:

https://jsfiddle.net/Hastig/zberQ/17/

Here's the JavaScript snippet:

$('.close').click(function() {
    $(this).parent().slideUp(400);
});

And here's the simplified CSS:

.publication1 {
    background: red;
    color: white;
}

.publication2 {
    background: green;
    color: white;
}

.publication3 {
    background: blue;
    color: white;
}

Create dynamic div animations triggered by changes in size of another div

Answer №1

Similar questions

Activate Jquery when the screen width is below 500 pixels

Looping through an array of images using JavaScript

What is the best way to incorporate the same partial multiple times with varying content in Nunjucks?

Retrieving the length of an array from Firebase Firestore

Creating intricate JavaScript objects for JSON API integration can be accomplished by following these steps:

What could be causing the lack of styling in my Express application?

Is it possible to obtain an image that is responsive while maintaining a specific height?

One-line decorative border design

What causes the button to move down when adjusting the font in a textarea?

Is the "mocha" command line tool requires quotation marks for specifying test files?

Understanding Escaped JavaScript Syntax

Listen for the chosen choice

"Uncaught ReferenceError: $ is not defined - $function()" error in JavaScript/jQuery

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Establish a field alias with boundaries in AngularJS

Parsing the JSON string from PHP using JSON.parse resulted in an unexpected and strange array

javascript - developing a neutral constructor

The element cannot be clicked at this point as another element would intercept the click:

Do you require a lightbox for a white text box set against a semi-transparent black background?

Sass flex order has no effect on elements that are generated