Question

With a div like this:

<div id='im1' class='information_message error'>Error message here  <a href='javascript:hide('im1')'>Hide</a></div> 

And the following dojo/javascript code:

function hide(id){     id.innerHTML = '';     dojo.animateProperty({         node: id,         duration: 500,         properties: {             height: {end: 0}         },         onEnd: function(){             id.orphan();         }         }).play();     } 

I’m trying to do the following:

1. Animate the resize of the div’s height to 0
2. Delete the element from DOM afterwards

But currently the text doesn’t disappear, the animation animates only half-way and the div doesn’t get deleted upon animation complete. What’s the correct javascript code to accomplish my goals?

Answer 1

SebaGR, thank you for putting me in the right direction. The padding/margin did indeed have something to say stopping the animation half-ways. I still had problems with text inside the element, and deletion onEnd, but eventually found the answer myself. I also added a wrapper-div with .information_messages to allow for multiple .information_message elements. Final result follows:

Javascript:

function hide(id){     dojo.byId(id).style.overflow = 'hidden';     dojo.animateProperty({         node: id,         duration: 500,         properties: {             height: {start: dojo.contentBox(id).h, end: 0},             margin: {end: 0},             marginBottom: {end: 0},             padding: {start: 10, end: 0},             paddingLeft: {end: 10 },             paddingRight: {end: 10 },             borderWidth: {start: 1, end: 0}         },         onEnd: function(){             dojo.query('#' + id).orphan();             // when all information_message elements are deleted, delete             // the information_messages container as well. Animate              // padding change to prevent sudden 'jump' on deletion.             if(dojo.query('.information_message').length == 0){                 dojo.animateProperty({                     node: dojo.query('#information_messages')[0],                     duration: 500,                     properties: {                         padding: {start: 5, end: 0}                     },                     onEnd: function(){                         dojo.query('#information_messages').orphan();                     }                 }).play();             }         }     }).play(); } 

HTML:

<div id='information_messages'>     <div class='information_message success' id='im1'>         <a href='javascript:hide('im1');' class='right'>Hide</a>         Success message 1     </div>     <div class='information_message error' id='im2'>         <a href='javascript:hide('im2');' class='right'>Hide</a>         Error message 1     </div> </div> 

CSS:

#information_messages {     padding: 5px; }  .information_message {     margin-bottom:3px;   }  .error {     border: 1px solid #b2110a;     background-color: #f3dddc;     padding: 10px; }  .success {     border: 1px solid #177415;     background-color: #d6f6d5;     padding: 10px; }