0

クリックした div ボックスの横にある 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

@リッキーアン

この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 に答える