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

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

Answer 2

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.