存儲來自每個元素的定位信息（jQuery/Javascript）

Question

歡樂谷
我一直在玩這個想法幾天，但似乎無法得到它的好把握。我覺得我快到了，但可以使用一些幫助。當我得到一個答案時，我可能會把自己的腦袋打在腦後。

實際的問題
我有一系列的<articles>在我<section>，他們是用PHP（和嫩枝）產生。 <article>標籤中有一個圖像和一個段落。在頁面上，只有圖像可見。用戶點擊圖片後，文章將水平展開，並顯示該段落。這篇文章還有左邊的動畫，因此佔據了該部分的整個寬度，並將所有其他文章隱藏在其後面。

我已經完成了這部分效果沒有問題。真正的問題是讓文章回到原來的位置。文章內是「Close」<button>。一旦按鈕被點擊，效果需要扭轉（即本文返回到原來的大小，只顯示圖像，並返回到原來的位置。）

當前理論
我想我需要從每篇文章的每一節中檢索偏移量（）。左側信息，並確保它與各自的文章相關聯，以便文章知道在「關閉」按鈕被點擊後應該去哪裏。我當然可以接受不同的解釋。

我一直在試圖使用$.each，each()，$.map，map()和toArray()職務中知悉的效果。

實際代碼

/*CSS*/ 
section > article.window { 
          width:170px; 
          height:200px; 
          padding:0; 
          margin:4px 0 0 4px; 
          position:relative; 
          float:left; 
          overflow:hidden; 
         } 
section > article.window:nth-child(1) {margin-left:0;} 

<!--HTML--> 
<article class="window"> 
    <img alt="Title-1" /> 
    <p><!-- I'm a paragraph filled with text --></p> 
    <button class="sClose">Close</button> 
</article> 
<article class="window"> 
    <!-- Ditto + 2 more --> 
</article> 

失敗的嘗試實施例

function winSlide() { 
    var aO = $(this).parent().offset() 
    var aOL = aO.left 
    var dO = $(this).offset() 
    var dOL = dO.left 
    var dOT = dO.top 
    var adTravel = dOL-aOL 

    $(this).addClass('windowOP'); 
    $(this).children('div').animate({left:-(adTravel-3)+'px', width:'740px'},250) 
    $(this).children('div').append('<button class="sClose">Close</button>'); 

    $(this).unbind('click', winSlide); 
} 
$('.window').on('click', winSlide) 

$('.window').on('click', 'button.sClose', function() { 
    var wW = $(this).parents('.window').width() 
    var aO = $(this).parents('section').offset() 
    var aOL = aO.left 
    var pOL = $(this).parents('.window').offset().left 
    var apTravel = pOL - aOL 

    $(this).parent('div').animate({left:'+='+apTravel+'px'},250).delay(250, function() {$(this).animate({width:wW+'px'},250); $('.window').removeClass('windowOP');}) 

    $('.window').bind('click', winSlide) 

}) 

在你去摸頭之前，我必須記下這個嘗試是否涉及文章中的額外div。這個想法是把文章的溢出設置爲可見(.addclass('windowOP'))隨着div自由移動。這種方法實際上工作...差不多。動畫在第二次發射後會失敗。另外由於某些原因，在關閉第一篇文章時，左邊距屬性被忽略。

即。
第一次被點擊的窗口：執行打開動畫完美地點擊 第一時間窗口的關閉按鈕：完美執行關閉動畫，返回原來的位置 第二次點擊同一個窗口：動畫失敗，但打開來糾正尺寸 第二時間窗口的點擊關閉按鈕（如果可見）：沒有任何反應

感謝您的耐心等待。如果您需要更多信息，只需詢問。

編輯
加入Flambino代碼修補後的jsfiddle。

http://jsfiddle.net/6RV88/66/

未點擊需要留在原地的文章。現在遇到問題。

Answer 1

如果你想要去的存儲偏移，可以在「上」的元素使用jQuery的.data方法來存儲數據，並在以後檢索：

// Store offset before any animations 
// (using .each here, but it could also be done in a click handler, 
// before starting the animation) 
$(".window").each(function() { 
    $(this).data("closedOffset", $(this).position()); 
}); 

// Retrieve the offsets later 
$('.window').on('click', 'button.sClose', function() { 
    var originalOffset = $(this).data("originalOffset"); 
    // ... 
}); 

Here's a (very) simple jsfiddle example

更新：而且here's a more fleshed-out one

Answer 2

非常感謝Flambino

我能夠創造出所需的效果。你可以在這裏看到它：http://jsfiddle.net/gck2Y/或者你可以看看下面的代碼和一些解釋。

我並沒有記住每篇文章的偏移量，而是在點擊文章的兄弟姐妹中使用了邊距。這不太漂亮，但它運作得非常好。

<!-- HTML --> 
<section> 
    <article>Click!</article> 
    <article>Me Too</article> 
    <article>Me Three</article> 
    <article>I Aswell</article> 
</section> 

/* CSS */ 
section { 
    position: relative; 
    width: 404px; 
    border: 1px solid #000; 
    height: 100px; 
    overflow:hidden 
} 

article { 
    height:100px; 
    width:100px; 
    position: relative; 
    float:left; 
    background: green; 
    border-right:1px solid orange; 
} 

.expanded {z-index:2;} 

//Javascript 
var element = $("article"); 

element.on("click", function() { 
    if(!$(this).hasClass("expanded")) { 
     $(this).addClass("expanded"); 

     $(this).data("originalOffset", $(this).offset().left); 
     element.data("originalSize", { 
      width: element.width(), 
      height: element.height() 
     }); 

     var aOffset = $(this).data("originalOffset"); 
     var aOuterWidth = $(this).outerWidth(); 

     if(!$(this).is('article:first-child')){ 
      $(this).prev().css('margin-right',aOuterWidth) 
     } else { 
      $(this).next().css('margin-left',aOuterWidth) 
     } 

     $(this).css({'position':'absolute','left':aOffset}); 
     $(this).animate({ 
      left: 0, 
      width: "100%"     
     }, 500); 
    } else { 
     var offset = $(this).data("originalOffset"); 
     var size = $(this).data("originalSize"); 
     $(this).animate({ 
      left: offset + "px", 
      width: size.width + "px"     
     }, 500, function() { 
      $(this).removeClass("expanded"); 
      $(this).prev().css('margin-right','0') 
      $(this).next().css('margin-left','0') 
      element.css({'position':'relative','left':0}); 
     }); 
    } 
});​