Create a smooth transition of block elements when deleting sibling elements from the DOM

Question

I have a container that works like notifications in mac os - items are added to the queue and deleted after a certain timeout. This works great, but has one sharp visual side effect.

When they are removed from the DOM, an uneven update appears in the user interface, since the next item in the stack fills the void created by the previous item. I would like the elements below on the stack to move smoothly into this space, ideally with css3, but adding the transition: all 0.5s ease-in-out class to the .notice class .notice not affect the object when its brother was deleted .

Minimum JS Interference:

 $('#add').click(function(e) { e.preventDefault(); $('#container').append('<p class="notice">Notice #</p>'); }); $('body').on('click','p.notice', function(e) { $(this).fadeOut(); }); 

Better still a fiddle here:

http://jsfiddle.net/kMxqj/

I use the MVC environment to bind data to these objects, so some native css / jQuery is preferable over the Jq plugin.

Answer 1

This should remove the element with a click with the fading effect, and then move everything lower smoothly. This will work for any notice div on the stack regardless of its position on the stack.

Try:

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

Feed here

Answer 2

The jQuery Animate () method is a great tool to learn, because you can not only fade your objects, but also move them around, all at the same time.

CSS:

 .notice { position:relative; top:20px; width: 100%; height: 50px; background-color: #ccc; opacity:0; } 

jQuery:

 $('#add').click(function(e) { e.preventDefault(); $('#container').append('<p class="notice">Notice #</p>'); $('.notice').animate({opacity: 1, top:0}, 1000); }); $('body').on('click','p.notice', function(e) { $(this).fadeOut(); }); 

And my jsFiddle demo

Answer 3

An easy way to do this is to animate the height and field properties - http://jsfiddle.net/kMxqj/14/

 $('#add').click(function(e) { e.preventDefault(); $('#container').append('<p class="notice">Notice #</p>'); }); $('body').on('click','p.notice', function(e) { $(this).animate({'height':0,'margin':'0'}); $(this).fadeOut(); }); 

This will lead to an animation of the height and margins to 0, as well as to fade the object, which will lead to a smooth transition. In addition, adding overflow is hidden in your notification window, so any content inside is covered as the animation progresses.

Answer 4

How about this fiddle

CSS

 .notice { width: 0; height: 0; background-color: #ccc; } 

Js

 $('#add').click(function(e) { e.preventDefault(); $('#container').append('<p class="notice">Notice #</p>'); $('#container p.notice:last-child').animate({ width: 100%, height: 50px }); }); $('body').on('click','p.notice', function(e) { $(this).fadeOut(); }); 

Change the values ​​as needed, but something like this should do what you want - it looks like the animation () may be what you want, but

Answer 5

No jQuery:

Preferred Method: max-width :

HTML

 <div id="wrapper"> <div class="myspan"> child </div> <div id="removable" class="myspan"> removable child </div> <div class="myspan"> child </div> <div class=""> child </div> </div> 

CSS

 .myspan { display: inline-block; font-size: 30px; display: inline-block; max-width: 200px; transition: all 1s; overflow: hidden; } .myspan:hover { max-width: 0; }