0

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

这是小提琴的链接

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 有关，但不确定如何解决这个问题.....当我单击下一个框时，我不希望框上下跳动

4

2 回答 2

3

@RickyAhn

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

淡入新的活动块并在完成时淡出先前活动的块；那样没有摇晃。

更新的行如下所示：

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

于 2013-08-15T19:12:40.600 回答
1

据我了解，当您单击下一个框时，当前外部 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。无论如何，这超出了您的问题范围。

于 2013-08-15T19:10:55.207 回答