2

Pleasantries
我已经玩了几天这个想法，但似乎无法很好地掌握它。我觉得我快到了，但可以使用一些帮助。当我得到答案时，我可能会打自己的头。

实际问题我
有一系列的，它们是用 php（和 TWIG）生成的。标签中有一个图像和一个段落。在页面上，只有图像可见。用户点击图片后，文章会横向展开并显示段落。文章也会向左显示动画，因此占据了该部分的整个宽度，并将所有其他文章隐藏在其后面。<articles><section><article>

我已经毫无问题地完成了这部分效果。真正的问题是让文章回到原来的位置。文章中有一个“关闭” <button>。一旦按钮被点击，需要反转效果（即文章恢复到原来的大小，只显示图像，并返回到原来的位置。）

当前理论
我认为我需要从每个部分的每篇文章中检索 offset().left 信息，并确保它与各自的文章相关联，以便文章知道单击“关闭”按钮后该去哪里。我当然愿意接受不同的解释。

我一直在尝试使用$.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 自由移动。这种方法实际上确实有效……几乎。动画在第二次触发后会失败。同样由于某种原因，在关闭第一篇文章时，左边距是属性被忽略了。

IE。
第一次单击窗口：完美执行打开动画 第一次单击窗口的关闭按钮：完美执行关闭动画，返回原始位置 第二次单击 SAME 窗口：动画失败，但打开到正确的大小 第二次单击窗口的关闭按钮（如果可见）：没有任何反应

感谢您的耐心等待。如果您需要更多信息，请询问。

编辑
在修改 Flambino 的代码后添加了一个 jsfiddle。

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

未点击的文章需要保留在原处。现在实现这一点有问题。

4

2 回答 2

2

如果您想存储偏移量，可以使用 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");
  // ...
});

这是一个（非常）简单的 jsfiddle 示例

更新：这是一个更充实的

于 2012-06-11T02:37:32.010 回答
0

非常感谢 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});
        });
    }
});​
于 2012-06-11T16:26:08.027 回答