javascript – 没有jQuery的动画’show’

我想在这个最新的网站上做一些动画我正在努力.基本上,我需要一个或两个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/

设置宽度也应该非常简单(甚至可能在同一时间),以实现“更酷”的效果.

javascript – 没有jQuery的动画’show’

解决方法

相关文章