2

私はこのアイデアを数日間いじっ
ていましたが、よく理解できていないようです。私はほとんどそこにいると感じていますが、助けが必要です。答えが返ってきたら、頭をぶつけてしまいそうです。

実際の問題私は私の中に
一連のものを持っています、それらはphp（およびTWIG）で生成されます。タグには、画像とその中に段落があります。ページには、画像のみが表示されます。ユーザーが画像をクリックすると、記事が水平方向に拡大し、段落が表示されます。記事も左にアニメーション化されるため、セクションの幅全体を占有し、他のすべての記事はその後ろに隠れたままになります。<articles><section><article>

この部分の効果は問題なく達成できました。本当の問題は、記事を元の場所に戻すことです。記事内には「Close」があり<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 が自由に動き回る状態で、記事のオーバーフローを可視に設定することでした。この方法は実際に機能しました...ほとんど。アニメーションは、2 回目の起動後に失敗します。また、なぜか最初の記事を閉じるときに、左マージンの was プロパティが無視されていました。

すなわち。
最初にウィンドウがクリックされたとき: 開くアニメーションを問題なく実行する 最初にウィンドウの閉じるボタンがクリックされた: 問題なく閉じるアニメーションが実行され、元の位置に戻る 2 回目に同じウィンドウがクリックされた: アニメーションは失敗したが、正しいサイズで開く 2 回目にウィンドウの閉じるボタンがクリックされた (表示されている場合): 何も起こりません

お待ちいただいてありがとうございます。さらに情報が必要な場合は、お尋ねください。

編集
フランビーノのコードをいじった後、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

フランビーノに感謝します

思い通りの効果を出すことができました。あなたはここでそれを見ることができます：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 に答える