CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2950370
user2950370

Reputation: 117

how to fire a jquery child function at the start of parent animation

I'm coding a button that has a CSS arrow which flips up and down every time it's container is clicked.

It looks fine, but i can't figure out how to fire the toggleClass function as soon as slideToggle has been clicked.

The arrow looks like it is lagging a little because it waits a fraction of a second until the end of the slideToggle animation.

Is it possible to make the toggleClass fire at the start of the animation rather than the end?

$("#content_link").click(function(){
    $("#content").slideToggle("fast",function(){

    $("div#arrow_container").toggleClass('arrow_down');         
    $("div#arrow_container").toggleClass('arrow_up');
    });

});

Upvotes: 0

Views: 61

Answers (3)

bipen
bipen

Reputation: 36531

not sure if this is what you are asking for but yes call it before the slideToggle() function and not inside its callback function

 $("#content_link").click(function(){
   $("div#arrow_container").toggleClass('arrow_down')
                           .toggleClass('arrow_up');
   $("#content").slideToggle("fast");

});

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Remove that code from the call back and add it after the slideToggle function call like this

$("#content_link").click(function(){
    $("#content").slideToggle("fast");
    $("div#arrow_container").toggleClass('arrow_down');         
    $("div#arrow_container").toggleClass('arrow_up');
});

Upvotes: 1

janfoeh
janfoeh

Reputation: 10328

You can set a start callback as well:

$("header#tag_cat1 div#cat1_content_link").click(function(){
  $("#tag_cat1_content").slideToggle({
    duration: "fast",
    complete: function(){
      $("section.category header > div#cat1_content_link > div").toggleClass('gt_arrow_down_5px');
      $("section.category header > div#cat1_content_link > div").toggleClass('bt_arrow_up_5px');
    },
    start: function() {...}
  });

});

Take a look at the second form of .slideToggle()

Upvotes: 0

Related Questions