jqueryを使用して特定のdiv以下のボタンにアニメーションを表示

divの下に3つのボタンがあります（マージントップの値を使用）。ユーザーがそれらの1つをクリックすると、アニメーション化され、divの下に移動する必要があります。私は最初のボタンだけに成功します。jqueryを使用して特定のdiv以下のボタンにアニメーションを表示

例は、問題は（選びまし）は、第2のボタンはアニメーションが開始された前に本家の私は「非選びました」のボタンを削除（最初のボタンの下に移動していること。

HTMLでここJsfiddle

です：

<body> 
    <div id="inner_body"> 
    <div> 
     Animate button below me! 
    </div> 
    <button class="bc" id="0" style="margin-top:250px">Botton A</button> 
    <button class="bc" id="1">Botton B</button> 
    <button class="bc" id="2">Botton C is below buton A and button B</button> 
    </div> 
</body>

JavaSctipt：

$(document).on('click', '.bc', function() { 
    var x = []; 
    var y = []; 
    //Saving original position 
    for (var i = 0; i < 3; i = i + 1) { 
    x[i] = $('#' + i + '').position().left; 
    y[i] = $('#' + i + '').position().top; 
    } 

    //Locating all buttons with absolute position 
    for (var i = 0; i < 3; i = i + 1) { 
    $('#' + i + '').css({ 
     'position': 'absolute', 
     'top': y[i] + 'px', 
     'left': x[i] + 'px' 
    }) 
    } 

    //Hiding other buttons 
    for (var i = 0; i < 3; i = i + 1) { 
    if (i != this.id) { 
     $('#' + i + '').remove(); 
    } 
    } 

    //Animating our buttons 
    $(this).animate({ 
    left: 0, 
    marginTop: 0 
    }, "slow"); 

});

CSS：

#inner_body { 
    position: relative; 
    margin: auto; 
    text-align: center; 
    margin-top: 50px 
} 

button { 
    margin-right: 40px; 
    padding: 20px; 
    background-color: #718bf3; 
}

出典

2016-09-22 Andy

あなたはこの試しくださいtop : 0,とmarginTop : height of the div

//Animating our buttons 
    $(this).animate({ 
    left: 0, 
    top: 0, 
    marginTop: $('#inner_body > div').outerHeight() 
    }, "slow");

Jsfiddle

出典

2016-09-22 08:29:35

ニース！この例では、ページにdivが1つしかありません。私のアプリケーションでは、ボタンの上に複数のdivやその他のコンテンツがあります。このdivとコンテナの上端の間の高さを計算することはできますか？ – Andy

@Andyこれを見てくださいhttps://jsfiddle.net/mohamedyousef1980/xe31uvnj/5/ –

ありがとう、これは私が探していたものです。 – Andy

を使用する必要があります。ただ、ボタンAとBにマージントップ値を追加

<body> 
    <div id="inner_body"> 
    <div> 
     Animate button below me! 
    </div> 
    <button class="bc" id="0" style="margin-top:250px">Botton A</button> 
    <button class="bc" id="1" style="margin-top:250px">Botton B</button> 
    <button class="bc" id="2">Botton C is below buton A and button B</button> 
    </div> 
</body> 


$(document).on('click', '.bc', function() { 
    var x = []; 
    var y = []; 
    //Saving original position 
    for (var i = 0; i < 3; i = i + 1) { 
    x[i] = $('#' + i + '').position().left; 
    y[i] = $('#' + i + '').position().top; 
    } 

    //Locating all buttons with absolute position 
    for (var i = 0; i < 3; i = i + 1) { 
    $('#' + i + '').css({ 
     'position': 'absolute', 
     'top': y[i] + 'px', 
     'left': x[i] + 'px' 
    }) 
    } 

    //Hiding other buttons 
    for (var i = 0; i < 3; i = i + 1) { 
    if (i != this.id) { 
     $('#' + i + '').remove(); 
    } 
    } 

    //Animating our buttons 
    $(this).animate({ 
    left: 0, 
    marginTop: 0, 
    top:20 //added code here 
    }, "slow"); 

});

をアニメーションを作成するときは、top：20を追加します。

出典

2016-09-22 08:31:25

これはうまくいくでしょうが、私は応答性の高いページが必要です。ボタンBがボタンAの下に表示されたり、3つのボタンがすべて同じ行に配置されている可能性があります。 – Andy

私は.. Mohamed-Yousefの答えあなたのニーズに合うでしょう。 –

jqueryを使用して特定のdiv以下のボタンにアニメーションを表示

答えて

関連する問題