4

ここでの例：http：//jsfiddle.net/KyW6c/2/

注文リストがあります。各リストアイテムは私のポートフォリオのプロジェクトです。クリックしたリストアイテムを順序付きリストの左上に移動するjQueryを作成しています。私はこれを達成しましたが、私が遭遇している問題は、クリックされたものの下のリスト項目がシフトしていることです。このコードはフィドルで提供されます（コメントアウト）。

私が実装しようとしているソリューションは、ページが読み込まれると、各リストアイテムの位置を絶対位置に設定し、順序付きリスト内の現在の位置に左右を設定します。.each（）の機能や、その実装方法を誤解しているために問題が発生しているかどうかはわかりません。

ありがとう。

編集：問題は、各リストアイテムの左と上の値が0に設定されているため、左上ですべてが重なっていることです。jQueryのコメントを外すと、問題が発生します。

編集2：左と上のプロパティを設定すると同時に位置を絶対に設定しないと、正しく機能することを発見しました。

4

3 に答える 3

2

問題は、各要素を繰り返し処理するときに、現在の要素をポジショニングから削除する「postion：absolute」を設定していたことでした。各要素がレイアウトから「削除」されると、次の要素は0,0の位置にフロートします。

下から上に繰り返すことで、最初に左/上を保存してから、次の要素に影響を与えることなくpostion：absoluteを適用できます。

  $($('.project').get().reverse()).each(function(){
    var pos = $(this).position();
    $(this).css({
      left: pos.left + 'px',
      top: pos.top + 'px',
      position: 'absolute',
      'z-index': '999'
    })
  });

  // your original code
  $('.project').click(function(){
    var $this  = $(this),
        left = $this.position().left + 'px',
        top  = $this.position().top + 'px';
    $this.css({
      left:      left,
      top:       top,
      position:  'absolute',
      'z-index': '999'
    }).animate({
      left:       0,
      top:        0,
      width:      '750px'
    }, 'fast', 'swing')
  });
于 2012-05-07T06:11:46.527 に答える
1

http://jsfiddle.net/KyW6c/11/

友人の助けを借りて理解しました。ありがとう、マット！

于 2012-05-07T13:39:18.210 に答える
0 
$('.project').ready().each(..)

する必要があります

$('.project').each(..)

あなたはこのようなことを試すことができます：

  var left = 0,
      top = 0;
$('.project').each(function(){
    var $this  = $(this),
    $this.css({
      left:      (left+10) + 'px',
      top:       (top+10) + 'px',
      position:  'absolute',
      'z-index': '999'
    })
  });
于 2012-05-07T04:23:48.487 に答える