javascript - Delaying jQuery toggleClass effect until a slide animation has finished -

i'm having issues jquery delay() function. i'm using try , force toggleclass action wait until slideup animation has completed on 1 of divs doesn't appear working.

my style aims @ having bar rounded corners when clicked expands reveal further content round corners of bar @ bottom becoming squared though bar has expanded reveal content. fine , works however, when collapse expansion, bar needs go having rounded corners @ bottom after collapse animation has completed. @ moment seems fire before animation has completed.

i read somewhere online jquery 'slow' speed of transition 600 milliseconds set delay 800 make sure out of way again hasn't done anything.

any suggestions? code , fiddle 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');             };                                               });      }); 

http://jsfiddle.net/jezzipin/kfehd/6/

jquery animations , effects have callback functions want happen after finishes.

e.g.

var thisparent = $(this).parent(); $(this).closest('.history_record_container').find('.history_record_body').slidedown('slow',function() {   $(thisparent).toggleclass('squared_bottom'); });