问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

setInteval中改变margin不起作用

头像
simple_5820793e901a0
    26055073

    实现简单的动画效果，每隔2s，将p内的内容替换掉让将p向上消失，时间为2s，一步步测试的时候没问题，但运行时，没有任何动画效果
    代码如下复制运行：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #wrap{
            width:200px;
            height:40px;
            border:thin solid red;
        }
        #content{
            transition: all 2s;
            height:20px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <p id="content">11111</p>
</div>
<script type="text/javascript">
    function animation(){
        var array=['111111111111111111','2222222222222222222','33333333333333333'];
        var index=0;
        setInterval(function(){
            var wrap = document.getElementById('wrap');
            var content = document.getElementById('content');
            content.style.marginTop = -40+'px';
            wrap.innerHTML = '<p id="content">'+array[index++]+'</p>';
            if(index == array.length){
                index = 0;
            }
        },2000);
    }
    animation();
</script>
</body>
</html>
    cssjavascripthtml
    阅读 2.7k
    4 个回答
    得票最新
    头像
    怪我咯QAQ
      122148

      逻辑有问题啊，在wrap.innerHTML = '<p id="content">'+array[index++]+'</p>';行上打个断点你就看到了，想实现这个效果你加个css3动画就行了
      再加个定时器也可以，只不过这样太耗性能

        function animation(){
        var array=['111111111111111111','2222222222222222222','33333333333333333'];
        var index=0;
        setInterval(function(){
            var wrap = document.getElementById('wrap');
            var content = document.getElementById('content');
            content.style.marginTop = -40+'px';
            setTimeout(function(){
                wrap.innerHTML = '<p id="content">'+array[index++]+'</p>';
                if(index == array.length){
                    index = 0;
                }
            },1000)

        },2000);
    }
      头像
      ycloud
        1.5k219
        头像
        托马斯
          123

          因为后面的语句把前面语句设置的样式覆盖了

          content.style.marginTop = -40+'px';
wrap.innerHTML = '<p id="content">'+array[index++]+'</p>';
          头像
          上啊比卡丘
            6602918

            偏个题。如果题主是想做这种动画效果的话 推荐使用css3实现，因为这样的写法实在是太损耗性能，在手机上跑很容易掉帧。

            当然，如果题主只是初学者想学下怎么使用Javascript制作动画的话就无所谓了，有空还是要看下css3，transtion或者animation配合transform可以很简单实现这样的效果。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题