javascript - 默认隐藏在页面底部的元素 在单击事件后从低端慢慢上升显示出来？我的怎么没有动画效果？

问题描述

问 题

我想实现的是在页面底部（隐藏的元素），在单击按钮时，从低端显示，并移动到指定的位置，目前可以显示，但是显示的过程没有缓慢上升的过程，请问怎么解决？

解决方案

真正的原因

div元素默认情况下 position属性值是static， 而top属性只能应用在position: relative、position: absolute或者 position: fixed的块级元素上！
所以你用animate设置top无效，不信你把.bottom_show元素的position设置为relative试试！

附：css对于块级元素position属性值的说明

• static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

• relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

• absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

• fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

我提供的示例

我将 .bottom_show 元素设置为了 position:relative， 同时为了动画的顺畅，设置这个元素初始透明度为0.这样淡出效果比较好。
见我写的示例

核心代码

HTML

<div class="bottom_show" style="display:none; position:relative; opacity:0">.bottom_show对应的区块（隐藏）  
  </div>

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

这篇关于javascript - 默认隐藏在页面底部的元素 在单击事件后从低端慢慢上升显示出来？我的怎么没有动画效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！