問(wèn)題描述

我想實(shí)現(xiàn)的是在頁(yè)面底部（隱藏的元素），在單擊按鈕時(shí)，從低端顯示，并移動(dòng)到指定的位置，目前可以顯示，但是顯示的過(guò)程沒(méi)有緩慢上升的過(guò)程，請(qǐng)問(wèn)怎么解決？

問(wèn)題解答

p元素默認(rèn)情況下 position屬性值是static， 而top屬性只能應(yīng)用在position: relative、position: absolute或者 position: fixed的塊級(jí)元素上！ 所以你用animate設(shè)置top無(wú)效，不信你把.bottom_show元素的position設(shè)置為relative試試！

附：css對(duì)于塊級(jí)元素position屬性值的說(shuō)明

static：無(wú)特殊定位，對(duì)象遵循正常文檔流。top，right，bottom，left等屬性不會(huì)被應(yīng)用。

relative：對(duì)象遵循正常文檔流，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過(guò)z-index屬性定義。

absolute：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)z-index屬性定義。

fixed：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。而其層疊通過(guò)z-index屬性定義。

我將 .bottom_show 元素設(shè)置為了 position:relative， 同時(shí)為了動(dòng)畫的順暢，設(shè)置這個(gè)元素初始透明度為0.這樣淡出效果比較好。見(jiàn)我寫的示例

HTML

<p style='display:none; position:relative; opacity:0'>.bottom_show對(duì)應(yīng)的區(qū)塊（隱藏） </p>

Javascript

var offsetHeight = document.querySelector(’#article’).offsetHeight; $(’.bottom_show’).css(’top’, $(this).height() + ’px’); $(this).hide(30); $(’.bottom_show’).show().animate({top:0, opacity: 1}, 1000);回答2：

hide() 和 show() 拼接動(dòng)畫往往會(huì)有一些問(wèn)題, 建議用 fadeIn();

我覺(jué)得你的思路是不是有問(wèn)題，首先你這個(gè)移動(dòng)到屏幕外改elment應(yīng)該是顯示的。只不過(guò)需要設(shè)置top的值，使其在屏幕范圍內(nèi)看不到，當(dāng)需要展示的時(shí)候然后用animate設(shè)置top值，然后就能移動(dòng)到你想要到的位置。如果不考慮兼容性的話更推薦使用transition+transform:translate組合。

.wrap {width: 400px;height: 400px;overflow: hidden; }.content {height: 200px;background: #000; }.btn {height: 100px;background: #f00; }.tb {position: relative;height: 100px; }.tbitem {position: absolute;top: 100px;left: 0;width: 100%;height: 100%;background: #f11;transition: all .2s linear; }.tbitem.active {transform: translateY(-100px); }

<p class='wrap'><p class='content'></p><p class='btn'> <button type='button'></button> <button type='button'></button> <button type='button'></button></p><ul class='tb'> <li class='tbitem active'>1</li> <li class='tbitem'>2</li> <li class='tbitem'>3</li></ul> </p>

var btn_bar = document.querySelectorAll(’.btn button’);console.log(btn_bar);var tbitem_bar = document.querySelectorAll(’.tb .tbitem’);console.log(tbitem_bar);[].forEach.call(btn_bar, function(btn, i) { btn.addEventListener(’click’, function() {var item = tbitem_bar[i];var curClass = item.className.split(’ ’);if (curClass.indexOf(’active’) != -1) return;var active_item = document.querySelector(’.tb .active’);activeClass = active_item.className.split(’ ’);activeClass.splice(activeClass.indexOf(’active’), 1);active_item.className = activeClass.join(’ ’);curClass.push(’active’);item.className = curClass.join(’ ’); })})