Create smooth transition of block elements when removing sibling elements from DOM

css, css-transitions, javascript, jquery

Solution

This should remove the clicked element with a fade out effect and then move everything below up smoothly. This will work for any `notice` div in the stack regardless of it position within the stack.

Try:

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut(500,function(){
        $(this).css({"visibility":"hidden",display:'block'}).slideUp();
    });
});

Fiddle here

Update August 7th, 2018:

As asked by one of the users about using pure JS to do the slideUp functionality, I've put together a quick demo using requestAnimationFrame to animate the height of an element. Fiddle can be found here.

Problem

I have a container that is working similar to notifications in mac os - elements are added to the queue and removed after a certain timeout. This works great but has one jarring visual side effect. When they are removed from the DOM there is a jagged update to the UI as the next element in the stack fills the void created by the previous element. I would like the elements below in the stack to move up into that space smoothly, ideally with css3 but adding a `transition: all 0.5s ease-in-out` to the `.notice` class had no effect on the object when its sibling was remove. Minimal JS interpertation : ``` $('#add').click(function(e) { e.preventDefault(); $('#container').append('<p class="notice">Notice #</p>'); }); $('body').on('click','p.notice', function(e) { $(this).fadeOut(); }); ``` Better yet fiddle here : http://jsfiddle.net/kMxqj/ I'm using a MVC framework to data-bind these objects so some native css / jQuery is preferred over a Jq plugin.

Original source