javascript – 没有jQuery的动画’show’

前端之家收集整理的这篇文章主要介绍了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.f2er.com/jquery/158820.html

猜你在找的jQuery相关文章