Incomplete transition in Semantic Ui

Well, I use the semantic interface in my project, And now I'm stuck, and the problem is that I want to hide the element #header_1with the transition and after the transition is completed I use the behavior onCompleteto show another element#hidden

Here is 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 is my javascript code

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

});

Sorry for the bad english and help me solve this problem.

+4
source share
1 answer

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

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

Source: https://habr.com/ru/post/1605889/


All Articles