Search code examples
javascriptjquerydelaywait

JQuery wait 500ms

maybe someone can help me out. So i got this code, to open a textbox on my page.

// OPEN CERTAIN BOX
$(function() {        
    var name = ('logo');
    var toggler = (name+'-toggler');
    var div = ('#'+name+'-box');
    var toggled_class = ('no-view');        
    var plus_minus_img_id = ('#'+name+'-box-image');

    $(toggler).on('click', function(){
        $(div).toggleClass(toggled_class)
        var src = ($(plus_minus_img_id).attr('src') === 'images/plus.png')
            ? 'images/minus.png'
            : 'images/plus.png';
        $(plus_minus_img_id).attr('src', src);
    });

    var height = $(div).outerHeight();
    $(div).css('max-height', height+'px');
    $(div).toggleClass(toggled_class);
})

Now I would like to wait 0,5 seconds, till the plus_minus image changes his source, because that's how long the transition takes. Is there a possibility to do that?

I tried it with delay, but it didn't work and I don't know where to put it.

Solution

  • If you want to wait exactly 500ms, use setTimeout() (or an animation library if you have animation).

    If you want to wait until a resource has loaded, listen for the load event on the resource.

    If you want to wait for a CSS transition to finish, listen for the transitionend event on the element.