Question

I’m trying to modify a Jquery plugin to fix the bugs.

Following are the codes how all associated together:

$('.' + settings.activeClass).live('click', function(){
    select(this);
    alert( $('#pg li.selected').height() );
    .......
});

function select(el){
hideSelected(function(){
    $(el).addClass('selected').removeClass('active');
    $(el).animate(settings.selectedCSS, 'slow');

});
}

So, before the ‘selected’ class added, the height is about 116px

$(el).addClass('selected').removeClass('active');

after the ‘selected’ class added, the height is supposed to be about 378px
as displayed on the html page rendered, the height updated to 378px

alert( $('#pg li.selected').height() );

However, when I was trying to print the value of the height, it still captured the old value before the ‘selected’ class added.

Here is the weird part where I added the alert box to print the value of the height after the ‘selected’ class added, it was supposed to grab the new value of the height but apparently it’s not.

So, I thought of a solution in mind, maybe JQuery has some sort of events for after click event ? or any alternative solution to this ?

Answer 1

your animate will execute async of the alert. You need to process whatever it is you wish to achieve in the animate callback:

http://api.jquery.com/animate/

so like:

$('.' + settings.activeClass).live('click', function(){
  select(this);
  // NOT HERE alert( $('#pg li.selected').height() );
  .......
});

function select(el){
  hideSelected(function(){
    $(el).addClass('selected').removeClass('active');
    $(el).animate(settings.selectedCSS, 'slow', function(){
      //here
      alert( $('#pg li.selected').height() );
    });
  });
}

Edit: As mentioned in my comment, you also have the option of passing a boolean argument to tell the animate function to process asynchronous or synchronously :

Animate API : http://api.jquery.com/animate/

Specific text related to processing queue :

.animate( properties, options )
*properties : A map of CSS properties that the animation will move toward.
optionsA map of additional options to pass to the method.

Supported keys:

1. duration: A string or number determining how long the animation will run.
2. easing: A string indicating which easing function to use for the
   transition.
3. complete: A function to call once the animation is complete. step: A
   function to be called after each step of the animation.

4. queue: A Boolean indicating whether to place the animation in the effects
   queue. If false, the animation will begin immediately. As of jQuery
   1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.

5. specialEasing: A map of one or more of the CSS properties defined by
   the properties argument and their corresponding easing functions
   (added 1.4).

*
–text taken directly from jquery.com – all rights reserved jquery