Question

js怎么做一个div宽度变化的动画

要javascript原生方法，JQ的不要..

我想要的效果：点击<a>后 -> 它的父级div在一个设定时间内(如10秒)由现在的宽度100px慢慢的变宽，增加到1000px;

好像应该用：setTimeout、clearTimeout 之类的。我新手，弄了一晚上都不知道该怎么加才能实现反复调用函数这个流程让div宽度逐步增加，如果不麻烦的话，请在代码里面写点简单的注释，我学下大概实现这个的判断流程、原理之类的。

万分感谢！！
<style>div{ width: 100px; height: 100px; line-height:100px; background: red; text-align: center;}</style><div><a href="#" id="text">Test</a></div>

<script>
(function test(objID) { var text = document.getElementById(objID); text.onclick = function() { var text = document.getElementById(objID); var div = text.parentNode; //取得id=objID对象的父节点 var width = div.offsetWidth; //取得元素宽度 alert(width); for (var i = width; i < 1001; i++) { div.style.width = i + "px"; } }})("text");
</script>

Answer 1

<script>
    var i = 100;
    var text = document.getElementById("text");
    function test() {                 
   
        var div = text.parentNode;  //取得id=objID对象的父节点        
        var width = div.offsetWidth; //取得元素宽度        
        
        if (i < 1001) {//如果小于1000的话就把div宽度+1
            i++;
            div.style.width = i + "px";  
        };                
    };
    //test("text");
    text.onclick = function(){//点击执行
        //不断执行div宽度+1
        setInterval('test()',5);
    } 
    </script>

你的问题在于用了for循环了，应该用定时器~

希望我的回答能帮到你哈，有问题可以追问，觉得好就点个赞，有用就采纳！

Answer 2

稍微改动了你的代码。
<style>div{ width: 100px; height: 100px; line-height:100px; background: red; text-align: center;}</style><div><a href="#" id="ss" onclick="test()">Test</a></div><script>var j= 100;function test() { var text = document.getElementById("ss"); var div = text.parentNode; //取得id=objID对象的父节点 var width = div.offsetWidth; //取得元素宽度 alert(width); j++; div.style.width = div.offsetWidth + 1 + "px"; setTimeout("test()",300); }; </script>

Answer 3

jQuery animiate...

追问

阅读能力有问题

Answer 4

<div><a href="#" id="text">Test</a></div>

<script>
var i = 100;
var text = document.getElementById("text");
function test() {

var div = text.parentNode; //取得id=objID对象的父节点
var width = div.offsetWidth; //取得元素宽度

if (i < 1001) {//如果小于1000的话就把div宽度+1
i++;
div.style.width = i + "px";
};
};
//test("text");
text.onclick = function(){//点击执行
//不断执行div宽度+1
setInterval('test()',5);
}
</script>