CODEWITHSUNDEEP
javascriptjquerycss
Matthew Flynn
Matthew Flynn

Reputation: 3941

Javascript Promise on JQuery addClass

I am animating in an element which has enough content to cause the overall height of the div to be effected.

The div in question is using a JQuery vegas background slider to rotate through some pictures.

No I animate in the element on a click event and use the following javascript;

    function loadSpecification() {
        hideAll();
        $("#specification").removeClass("hidden").addClass("show", { 
            complete: function () {
                console.log("completed animation");
                loadVegas();
            }
        });
    }

where the loadVegas() function reloads the vegas element in order to set the slide to cover the newly expanded div.

However, the complete function is not getting fired in this instance, am I invoking it correctly? If so what going wrong here please?

My css classes are as follows;

.hidden {
    display: none;
    opacity: 0;
    width: 0;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
}

.show {
    display: block;
    opacity:1;
    margin-bottom:10px;
    /*width: inherit;*/
}

Upvotes: 0

Views: 1744

Answers (1)

Linek
Linek

Reputation: 1363

Works fine, remember to add jQuery UI library as the complete function is not implemented in jQuery but in jQuery UI. See docs for more info.

 $("#specification").removeClass("hidden").addClass("show", {
   complete: function() {
     console.log("completed animation");
   }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="specification">test</div>

Upvotes: 4

Related Questions