CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
jezzipin
jezzipin

Reputation: 4244

Delaying jQuery toggleClass effect until a slide animation has finished

I'm having some issues with the jQuery delay() function. I'm currently using it to try and force a toggleClass action to wait until the slideUp animation has completed on one of my divs however it doesn't appear to be working.

My style aims at having a bar with rounded corners that when clicked expands to reveal further content with the round corners of the bar at bottom becoming squared so as to look as though the bar has actually expanded to reveal the content. This is fine and it works however, when I collapse the expansion, the bar needs to go back to having rounded corners at the bottom after the collapse animation has completed. At the moment it seems to fire before this animation has completed.

I read somewhere online that the jQuery 'slow' speed of transition is 600 milliseconds to I set the delay to 800 to make sure it is out of the way but again this hasn't actually done anything.

Any suggestions? Code and 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/

Upvotes: 0

Views: 2530

Answers (2)

Moob
Moob

Reputation: 16184

Try this: Fiddle here

    $(function() {
        $('span.history_record_toggle').click(function () {
            $zis = $(this);
            if($zis.hasClass('collapsed')){
                $zis.text('Show +')
                .removeClass('collapsed')
                .closest('.history_record_container')
                .find('.history_record_body')
                .slideUp('slow',function() {
                    $zis.parent().removeClass('squared_bottom');
                });
                $zis.parent().addClass('squared_bottom');
            }else{
                $zis.text('Hide -')
                .addClass('collapsed')
                .closest('.history_record_container')
                .find('.history_record_body')
                .slideDown('slow',function() {
                });
                $zis.parent().addClass('squared_bottom');
            };                                      
        });
    });

Upvotes: 0

CaribouCode
CaribouCode

Reputation: 14398

jQuery animations and effects have callback functions for what you want to happen after it finishes.

E.g.

var thisParent = $(this).parent();
$(this).closest('.history_record_container').find('.history_record_body').slideDown('slow',function() {
  $(thisParent).toggleClass('squared_bottom');
});

Upvotes: 1

Related Questions