Having some trouble with the jQuery delay() function. I'm using it to pause a toggleClass action until after a slideUp animation on one of my divs, but it doesn't seem to be working as expected.
I want a bar with rounded corners that expands when clicked to reveal content. When collapsing, the bottom corners should return to round shape after the collapse animation finishes. Currently, this transition seems to happen before the collapse animation completes.
I've tried setting the delay to 800 milliseconds, assuming the 'slow' speed is around 600ms according to online sources, but it hasn't made a difference.
Any suggestions? Code and fiddle provided below:
$(function() {
$('span.history_record_toggle').click(function () {
if($(this).hasClass('collapsed')){
$(this).text('Show +');
$(this).toggleClass('collapsed');
$(this)
.closest('.history_record_container')
.find('.history_record_body')
.slideUp('slow',function() {
});
$(this)
.parent()
.toggleClass('squared_bottom');
}else{
$(this).text('Hide -');
$(this).toggleClass('collapsed');
$(this)
.closest('.history_record_container')
.find('.history_record_body')
.slideDown('slow',function() {
});
$(this)
.parent()
.delay(800)
.toggleClass('squared_bottom');
};
});
});