oncomplete transition in Semantic Ui

Question

Well, I use semantic UI in my project, And now I get stuck and the problem is -- I want to hide a element #header_1 with transition and after the transition is complete I use behavior onComplete to show another element #hidden

Here's my Html Code

<div id="header_1">
    <a href="#" class="ui animated inverted large button uk-margin-small-bottom" id="play">
</div>
<div id="hidden">
    Booommm!!!!
</div>

And Here's my javascript code

$('#play').click(function(){
    $('#header_1').transition({
        animation : 'fade',
        duration : '500ms',
        onComplete : function(){
            $('#hidden').transition({'show'});
    }
});

});

Sorry for bad english, and please help me to solve this problem

Answer 1

According to the Official Documentation you should not use curly braces in the transition notation, i.e. your code should look like this:

...
onComplete : function(){
    $('#hidden').transition('show');
}
...