CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Ricky Ahn
Ricky Ahn

Reputation: 191

Bottom divs jumping on click

my bottoms divs are jumping up and down when i click on the div box next to the one thats clicked

heres a link to the fiddle

http://jsfiddle.net/abtPH/17/

heres my jquery 

 $('li').on('click', function(e){
  var active = $(this).siblings('.active');
  var posTop = ($(this).position()).top;
  if (active.length > 0) {
    var activeTop = (active.position()).top;
  if (activeTop == posTop) {
    active.toggleClass('active', 400).find('.outer').fadeOut('slow');
    $(this).find('.outer').fadeIn('slow');
  } else {
    $(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
    $(this).find('.outer').slideToggle();
  }
  } else {
    $(this).find('.outer').slideToggle();
   }
   $(this).toggleClass('active', 400);
  });

i think it has something to do with my toggleClass but unsure on how to fix this.....i dont want the box to jump up and down when i click on the next box

Upvotes: 0

Views: 101

Answers (2)

emgee
emgee

Reputation: 520

@RickyAhn

Check out this Fiddle I think it does what you need.

FadeIn the new active block and on completion FadeOut the previously active one; that way no jiggle.

Updated line shown below:

$(this).find('.outer').fadeIn('slow', function(){ active.toggleClass('active', 400).find('.outer').fadeOut('slow', function () {});

Upvotes: 3

Telvin Nguyen
Telvin Nguyen

Reputation: 3559

As I understood, when you clicks on the next box, the current outer div hide so fast, make the bottom part of the slide move up and down.

Replace below lines

      active.toggleClass('active', 400).find('.outer').fadeOut('slow');
      $(this).find('.outer').fadeIn('slow');

with below lines

      $(this).find('.outer').fadeIn('500', function(){ //after done to fadeIn new outer , we begin to hide previous active outer
          active.toggleClass('active', 400).find('.outer').fadeOut('800');
      });

Btw, I just want to notice on the way how you done with this slide, it maybe cause messy once you clicks on li faster than the duration which you set for animation. Anyway, it would be out of your question's scope.

Upvotes: 1

Related Questions