javascript - 点击时底部 div 跳转

Question

当我单击所单击的 div 旁边的 div 框时，我的底部 div 会上下跳跃

这是 fiddle 的链接

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

这是我的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);
  });

我认为这与我的toggleClass有关，但不确定如何解决这个问题......我不希望当我单击下一个框时该框上下跳跃

Answer 1

@RickyAhn

看看这个 Fiddle我认为它可以满足您的需要。

淡入新的事件 block 并在完成后淡出先前事件的 block ；这样就不会晃动。

更新后的行如下所示:

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