Sharivari Sharivari - 5 months ago 15
Javascript Question

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.

Answer

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.

Comments