Dojo resize and delete element on animation complete

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

Not sure about why it's not being removed, since I don't use DOJO but jQuery instead.

But I've come into the problem with the animation completing half-way in jQuery and it was because of margins / paddings. Add animation to padding and margin to 0, like this:

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

I believe that could help with animation not completing.

About the element removal, shot in the dark:

        onEnd: function(){
                dojo.query("#"+id.id).orphan();
        }

Note that in your code you're calling orphan() on a DOM object instead of a DOJO set. Maybe that solves it.

Answer 2

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;
}