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/

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

原文地址：https://www.jb51.cc/jquery/158820.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：javascript – 如果没有加载,从外部下一篇：javascript – 使用JQuery从另一个