我想在这个最新的网站上做一些动画我正在努力.基本上,我需要一个或两个div /段显示/隐藏基于onClick事件的单选按钮设置或复选框(然后,如果radio / check是值A,显示div / p,如果它是B然后隐藏它)
问题是,这就是我想在那个特定的网站上javascript-ify,所以jQuery看起来有点矫枉过正(甚至是缩小版)
是否有任何简单的[我不能强调这一点]通过vanilla javascript或其他一些最小的库来做这件事[我一般都在寻找事物< 2kB用于事件和小动画(高度)] 有任何想法吗？ 谢谢！ 编辑：感谢大家,我刚刚意识到,尽管我需要通过智能html js完成一些事情,但是显示/隐藏正确div的规则是如此复杂,以至于包含jQuery(甚至包括jQuery)的价值为30kB如果它已经从CDN缓存了更多,那么我将坚持使用jQuery.给每个人干杯:) 编辑：JS CSS3过渡后续
它工作:) http://jsfiddle.net/ygZM7/23/
唯一的事情是：如果之前未设置高度(动态),则首次设置时,背景轻弹(从0px高度开始).
解决方法
我想出了自己的快速脚本..这里什么都没有：
var AnimationStep = 10; //pixels
var AnimationInterval = 100; //milliseconds
window.onload = function() {
var oDiv = document.getElementById("Div1");
oDiv.style.display = "block";
var height = oDiv.clientHeight;
oDiv.style.height = "0px";
Animate(oDiv,height);
};
function Animate(element,targetHeight) {
var curHeight = element.clientHeight;
if (curHeight >= targetHeight)
return true;
element.style.height = (curHeight + AnimationStep) + "px";
window.setTimeout(function() {
Animate(element,targetHeight);
},AnimationInterval);
return false;
}
这将使用id Div1“动画”元素,你可以通过在顶部播放两个数字来控制速度：更大的步骤意味着每次显示更大的块,而更小的间隔意味着更快的动画.
此代码需要在元素上应用以下样式：
#Div1 { display: none; overflow: hidden; }
当然还有现场测试案例：http://jsfiddle.net/yahavbr/BbWCp/
设置宽度也应该非常简单(甚至可能在同一时间),以实现“更酷”的效果.
