Question

当我点击点击的那个旁边的div框时，我的底部div上下跳动

这是一个指向小提琴的链接

继承人我的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我认为它能满足您的需求。

FadeIn新的活动块并在完成FadeOut之前的活动块;那样没有傻笑。

更新后的行显示如下：

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

Answer 2

据我了解，当您点击下一个框时，当前外部div隐藏得如此之快，使滑块的底部上下移动。

替换以下行

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

以下行

      $(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');
      });

顺便说一句，我只是想注意你如何处理这张幻灯片，一旦你点击li比你为animation设置的持续时间更快，它可能会造成混乱。无论如何，这将超出你的问题的范围。

底部div跳跃点击

2 个答案: