使用jquery在特定div下方的動畫按鈕

在div下有3個按鈕（帶有margin-top值）。用戶點擊其中一個應該是動畫，並移動到div下面。我成功地只爲第一個按鈕做。使用jquery在特定div下方的動畫按鈕

實施例是這裏Jsfiddle

的問題是，所述第二按鈕（選用時）移動的第一按鈕下方（eventhough我去掉了「非選用」動畫之前按鈕已啓動。

HTML ：

<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。在我的應用程序中，按鈕上方有幾個div和其他內容。我可以計算這個div和容器頂部之間的高度嗎？ – Andy

@Andy看看這個https://jsfiddle.net/mohamedyousef1980/xe31uvnj/5/ –

非常感謝你 - 這就是我所追求的。 – Andy

試試這個：

<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"); 

});

邊距值就加到按鈕A和B然後添加頂部：20動畫時。

來源

2016-09-22 08:31:25

這將工作，但我需要一個響應頁面，並有一個可能性，按鈕B將位於按鈕A下面的某些屏幕或所有3個按鈕將位於同一行... – Andy

我明白了......穆罕默德 - 優素福的答案將符合您的需求。 –

使用jquery在特定div下方的動畫按鈕

回答

相關問題