jquery ui dialog - fade-in after effect

Question

function infoBox(title,text){
    $('.infobox').dialog({
    open: function( event, ui ) {$('.infobox').append('<p style="display:none;>'+text+'</p>'); 
    },
    beforeClose: function( event, ui ) {$('.infobox p').remove(); 
    },
    show:'drop' ,
    position:'top',
    title:title,
});
};

is out there something like an afteropen: option ?

or any other way to let the appended text fade in after the ui-effect has finished?

maybe something like something like: show:[{show:'drop', function(){$('.infobox p').fadeIn();}],

? thanks in advance

Answer 1

I think I understand what you are looking for. Just use .delay() and .fadeIn().

function infoBox(title,text){
        $('.infobox').dialog({
        open: function( event, ui ) {
            var p = $('<p style="display:none;">'+text+'</p>')
            $('.infobox').append(p);
            p.delay(1000).fadeIn(400);
        },
        beforeClose: function( event, ui ) {$('.infobox p').remove(); 
        },
        show:'drop' ,
        position:'top',
        title:title,
    });
}

DEMO: http://jsfiddle.net/dirtyd77/yTMwu/69/

---

EDIT: You can also write it like this:

$('.infobox').append('<p style="display:none;">'+text+'</p>').find('p').delay(1000).fadeIn(400);

DEMO: http://jsfiddle.net/dirtyd77/yTMwu/70/