Close Callout Message in Zurb Foundation after a period of time with jquery

Question

I really don't understand the Foundation jquery.

I create a message using Foundation and DJango. I just want the message to flash for a few seconds and the close.

I would also like to close a "success" callout at a different spend than say an "alert.:

this is the message in django & Foundation.

<div class="grid-x >
    <div id='messages' class="cell large-12 large-offset-0 medium-12">
        {% if messages %}
            {% for message in messages %}
                <div class="callout {% if message.tags %}{{ message.tags }}{% endif %}" data-closable>
                    <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
                        <span aria-hidden="true">&times;</span>
                    </button>
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    </div>
</div>

thank you,

Answer 1

this seems to work well.

$(document).ready( function() {

    $('.callout.warning').delay(5000).fadeOut();
    $('.callout.success').delay(3000).fadeOut();

}