网站上的毛刺动画 [英] Animation glitches on website

查看：190
本文介绍了网站上的毛刺动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我做了一个小规模的实验，我是在试探，当你多次袭击了黄色方块，将发生的动画，在下面的jsfiddle：

http://jsfiddle.net/aritro33/v86tE/5/

不过，我想，当你打撰写/后圆/按钮，在可见的jsfiddle动画这里移动到的jsfiddle。动画将被应用到帖子。这是的jsfiddle：

我有问题但和3次以上击中撰写和发布按钮后，动画分崩离析。

任何想法如何把第一的jsfiddle看到在第二的jsfiddle的岗位同样的动画？

感谢这么多的人谁可以帮助！

HTML的第二个实验：

 ＆LT; D​​IV ID =撰写＆GT;＆LT;跨度ID =firstspan＆GT;撰写＆LT; / SPAN＆GT;
 ＆LT;跨度ID =fourthspan＆GT;邮政和LT; / SPAN＆GT;＆LT; / DIV＆GT;
＆LT;跨度ID =noposts＆GT;  - 还没有帖子 - ＆LT; / SPAN＆GT;＆LT; D​​IV ID =composeheader＆GT;
    ＆LT;输入类型=文本ID =secondspanVALUE =写报头，在这里：/＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =thecolor＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =泡沫＆GT;
    ＆LT;输入类型=文本ID =thehexVALUE =＃2AC0A3/＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =身体与GT;＆LT;跨度ID =thirdspanCONTENTEDITABLE =真＆gt;此处撰写背景下的文字：＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
＆所述;微升的id =allposts＆GT;＆下; / UL＆GT;

CSS的第二个实验：

  @import URL（http://fonts.googleapis.com/css?family=Roboto:100）;
 身体 {
     背景颜色：＃2D3E50;
 } #compose {
     高度：215px;
     宽度：215px;
     背景颜色：＃EBF1F1;
     边界半径：150像素;
     位置：相对;
     左：100px的;
     顶部：40像素;
     颜色：＃2c3e50;
     -webkit-过渡：所有0.15S线性的;
     -moz-过渡：所有0.15S线性的;
     过渡：所有0.15S线性的;
 }
 #compose：悬停{
     背景颜色：＃219B86;
     颜色：＃EBF1F1;
 }
 #firstspan {
     字体大小：39px;
     FONT-FAMILY：'的Roboto;
     位置：相对;
     左：的22px;
     顶部：960x75像素;
 }
 #composeheader {
     高度：80px;
     宽度：500像素;
     背景颜色：＃2AC0A3;
     位置：相对;
     底：175px;
     左：365px;
     颜色：白色;
 }
 #secondspan {
     颜色：白色;
     FONT-FAMILY：'的Roboto;
     字体大小：40像素;
     位置：相对;
     背景颜色：＃2AC0A3;
     边框：1px的固体＃2AC0A3;
     左：15px的;
     顶部：10px的;
 }
 ＃身体 {
     最小高度：80px;
     溢出：隐藏;
     宽度：500像素;
     背景颜色：＃C6EEE6;
     位置：相对;
     左：365px;
     底：275px;
     填充：20像素;
     -moz-箱尺寸：边界盒;
     箱尺寸：边界盒;
     -ms-箱尺寸：边界盒;
     -webkit-箱尺寸：边界盒;
 }
 #thirdspan {
     颜色：黑色;
     FONT-FAMILY：'的Roboto;
     概述：0像素实心透明; }.thirdspan2 {
     颜色：黑色;
     FONT-FAMILY：'的Roboto;
     概述：0像素实心透明;
} ＃颜色 {
     高度：50像素;
     宽度：50像素;
     背景颜色：＃2AC0A3;
     边界半径：100像素;
     位置：相对;
     左：365px;
     底：315px;
 }
 .bubble {
     位置：相对;
     左：440px;
     底：365px;
     宽度：145px;
     高度：50像素;
     填充：0像素;
     背景：#FFFFFF;
     -webkit-边界半径：10px的;
     -moz-边界半径：10px的;
     边界半径：10px的;
 }
 .bubble：{后
     内容：'';
     位置：绝对的;
     边框样式：固体;
     边框宽度：10px的15px的10px的0;
     边框颜色：透明#FFFFFF;
     显示：块;
     宽度：0;
     的z-index：1;
     左：-15px;
     顶部：15px的;
 }
 #thehex {
     FONT-FAMILY：'的Roboto;
     字体大小：20像素;
     高度：30PX;
     宽度：115px;
     背景颜色：白色;
     位置：相对;
     边框：0像素无;
     概述：0像素实心透明;
     顶部：10px的;
     左：28px;
 }
 .animated {
     -webkit-动画持续时间：1秒;
     -moz-动画持续时间：1秒;
     -ms动画持续时间：1秒;
     -o-动画持续时间：1秒;
     动画持续时间：1秒;
     -webkit-动画填充模式：两者;
     -moz-动画填充模式：两者;
     -ms动画填充模式：两者;
     -o-动画填充模式：两者;
     动画填充模式：两者;
 }
 .animated.hinge {
     -webkit-动画持续时间：2秒;
     -moz-动画持续时间：2秒;
     -ms动画持续时间：2秒;
     -o-动画持续时间：2秒;
     动画持续时间：2秒;
 }
 @ -webkit-关键帧bounceInDown {
     0％{
         -webkit-变换：translateY（-2000px）;
     }
     60％{
         -webkit-变换：translateY（30像素）;
     }
     80％{
         -webkit-变换：translateY（-10px）
     }
     100％{
         -webkit-变换：translateY（）
     }
 }
 @ -moz-关键帧bounceInDown {
     0％{
         -moz-变换：translateY（-2000px）;
     }
     60％{
         -moz-变换：translateY（30像素）;
     }
     80％{
         -moz-变换：translateY（-10px）
     }
     100％{
         -moz-变换：translateY（）
     }
 }
 @ -ms关键帧bounceInDown {
     0％{
         -ms变换：translateY（-2000px）;
     }
     60％{
         -ms变换：translateY（30像素）;
     }
     80％{
         -ms变换：translateY（-10px）
     }
     100％{
         -ms变换：translateY（）
     }
 }
 @ -o-关键帧bounceInDown {
     0％{
         -o变换：translateY（-2000px）;
     }
     60％{
         -o变换：translateY（30像素）;
     }
     80％{
         -o变换：translateY（-10px）
     }
     100％{
         -o变换：translateY（）
     }
 }
 @keyframes bounceInDown {
     0％{
         变换：translateY（-2000px）;
     }
     60％{
         变换：translateY（30像素）;
     }
     80％{
         变换：translateY（-10px）
     }
     100％{
         变换：translateY（）
     }
 }
 .bounceInDown {
     -webkit-动画名称：bounceInDown;
     -moz-动画名称：bounceInDown;
     -ms动画名称：bounceInDown;
     -o-动画名称：bounceInDown;
     动画名称：bounceInDown;
 }
 @ -webkit-关键帧bounceInUp {
     0％{
         -webkit-变换：translateY（2000像素）;
     }
     60％{
         -webkit-变换：translateY（-30px）;
     }
     80％{
         -webkit-变换：translateY（10px的）
     }
     100％{
         -webkit-变换：translateY（）
     }
 }
 @ -moz-关键帧bounceInUp {
     0％{
         -moz-变换：translateY（2000像素）;
     }
     60％{
         -moz-变换：translateY（-30px）;
     }
     80％{
         -moz-变换：translateY（10px的）
     }
     100％{
         -moz-变换：translateY（）
     }
 }
 @ -ms关键帧bounceInUp {
     0％{
         -ms变换：translateY（2000像素）;
     }
     60％{
         -ms变换：translateY（-30px）;
     }
     80％{
         -ms变换：translateY（10px的）
     }
     100％{
         -ms变换：translateY（）
     }
 }
 @ -o-关键帧bounceInUp {
     0％{
         -o变换：translateY（2000像素）;
     }
     60％{
         -o变换：translateY（-30px）;
     }
     80％{
         -o变换：translateY（10px的）
     }
     100％{
         -o变换：translateY（）
     }
 }
 @keyframes bounceInUp {
     0％{
         变换：translateY（2000像素）;
     }
     60％{
         变换：translateY（-30px）;
     }
     80％{
         变换：translateY（10px的）
     }
     100％{
         变换：translateY（）
     }
 }
 .bounceInUp {
     -webkit-动画名称：bounceInUp;
     -moz-动画名称：bounceInUp;
     -ms动画名称：bounceInUp;
     -o-动画名称：bounceInUp;
     动画名称：bounceInUp;
 }
 #noposts {
     颜色：白色;
     字体大小：39px;
     FONT-FAMILY：'的Roboto;
     位置：相对;
     左：440px;
     底部：100像素;
 }
 #fourthspan {
     颜色：＃2c3e50;
     FONT-FAMILY：'的Roboto;
     字体大小：39px;
     位置：相对;
     左：70像素;
     顶部：960x75像素;
 }UL＃allposts李{
    最小高度：140px;
    宽度：500像素;
    位置：相对;
    左：239px;
    底：432px;
}.thecolor2 {    高度：50像素;
宽度：50像素;
    边界半径：100像素;
背景颜色：＃2AC0A3;
    位置：相对;
    底：591px;
    左：325px;
}UL {
    列表样式类型：无;
}.composeheader2 {
  高度：80px;
     宽度：500像素;
     背景颜色：＃2AC0A3;
     位置：相对;
     底：581px;
     左：325px;
     颜色：白色;}.secondspan2 {
      颜色：白色;
     FONT-FAMILY：'的Roboto;
     字体大小：40像素;
     背景颜色：＃2AC0A3;
     边框：1px的固体＃2AC0A3;
    位置：相对;
         左：知识+;
     顶部：13px的;}.body2 {
         最小高度：80px;
     溢出：隐藏;
     宽度：500像素;
     背景颜色：＃C6EEE6;
     位置：相对;
     左：325px;
     底：371px;
     -moz-箱尺寸：边界盒;
     箱尺寸：边界盒;
     -ms-箱尺寸：边界盒;
     -webkit-箱尺寸：边界盒;
}

JS的第二个实验：

  VAR clicktwice = FALSE;VAR色;
VAR forrgb;
VAR finalrgb2;
VAR myheader;// 198 238 230// RGB（42，192，163）＃2AC0A3// RGB（198，238，230）＃C6EEE6// + 156，+46，+67$（'＃fourthspan'）隐藏（）。
$（'＃thecolor'）隐藏（）。
$（'泡沫'）隐藏（）。
$（'＃composeheader'）隐藏（）。
$（'＃身体）隐藏（）。$（'＃撰写'）。点击（函数（）{    的setInterval（函数（）{
        $（'＃noposts'）fadeTo（10，0）。
    }，3000）;}）;$（＃thehex）。KEYUP（函数（）{
    颜色= $（＃thehex）VAL（）。    forrgb = $（＃thehex）VAL（）。
    $（＃thecolor），CSS（背景颜色，颜色）。
    $（＃secondspan），CSS（背景颜色，颜色）。
    $（＃secondspan），CSS（边框颜色，颜色）。
    $（＃composeheader），CSS（背景颜色，颜色）。
    forrgb = $（'＃thehex）VAL（）代替（'＃'，''）。
    VAR章= forrgb.length === 3？ forrgb [0] + forrgb [0] + forrgb [1] + forrgb [1] + forrgb [2] + forrgb [2]：forrgb;
    VAR兑换= reg.match（/ {2} /克）;    变种R = parseInt函数（CONV [0]，16）;
    R = R + 156;
    变种G = parseInt函数（CONV [1]，16）;
    G = G + 46;
    变种B = parseInt函数（CONV [2]，16）;
    B = B + 67;    变种RGB = R +'，'+ G +'，'+ B;
    RGB = rgb.replace（/ NaN的/克，'...'）;    变种finalrgb =（'RGB（+ RGB +'）'）;
    finalrgb2 = finalrgb;
    $（＃体），CSS（背景色，finalrgb）。}）;$（'＃撰写'）。点击（函数（）{
    如果（clicktwice === FALSE）{
        颜色=＃2AC0A3;
        finalrgb2 =RGB（198，238，230）;
        $（＃secondspan）VAL（写头的位置：）;
        $（'＃thirdspan）文本（在这里写下背景下的文字：）;
                $（'＃thehex）VAL（彩色）。
            $（＃thecolor），CSS（背景颜色，颜色）。
    $（＃secondspan），CSS（背景颜色，颜色）。
    $（＃secondspan），CSS（边框颜色，颜色）。
    $（＃composeheader），CSS（背景颜色，颜色）。
            $（＃体），CSS（背景色，finalrgb2）。
         $（'＃thecolor'）fadeTo（0，1）。
        $（'＃身体）fadeTo（0,1）。
        $（'泡沫'）fadeTo（0,1）。
        $（'＃composeheader'）fadeTo（0，1）。
        $（'＃firstspan'）隐藏（）。
        $（'＃fourthspan）显示（）。
        $（'＃thecolor）显示（）。
        $（'泡沫'）显示（）。
        $（'＃composeheader）显示（）。
        $（'＃身体）显示（）。  $（。composeheader2）。动画（{
    底部：' -  = 248px'  }，400）;          $（。body2）。动画（{
    底部：' -  = 248px'  }，400）;          $（。thecolor2）。动画（{
    底部：' -  = 245px'  }，400）;        $（'＃thecolor'）addClass（框动画bounceInDown'）。
        $（'泡沫'）addClass（框动画bounceInDown'）。
        $（'＃composeheader'）addClass（框动画bounceInDown'）。
        $（'＃身体'）addClass（框动画bounceInDown'）;
        clicktwice = TRUE;
    }否则如果（clicktwice ===真）{        myheader = $（＃secondspan）VAL（）。
        $（'。气泡'）fadeTo（300，0）。
        $（'＃firstspan）显示（）。
        $（'＃fourthspan'）隐藏（）。
        clicktwice = FALSE;
        变种thestream =的document.getElementById（'allposts'）;        VAR oneofpost =使用document.createElement（礼）;
        VAR thecolor2 =使用document.createElement（'DIV'）;
        thecolor2.className =thecolor2;
        VAR composeheader2 =使用document.createElement（'DIV'）;
        composeheader2.className =composeheader2;
        VAR secondspan2 =使用document.createElement（'跨'）;
        secondspan2.className =secondspan2;
        VAR body2 =使用document.createElement（'DIV'）;
        body2.className =body2;
        VAR thirdspan2 =使用document.createElement（'跨'）;
        thirdspan2.className =thirdspan2;
        VAR bodyText的= $（'＃thirdspan）HTML（）。
        thirdspan2.innerHTML = bodyText的;
        body2.style.backgroundColor = finalrgb2;
        secondspan2.innerHTML = myheader;
        thecolor2.style.backgroundColor =颜色;
        composeheader2.style.backgroundColor =颜色;
        secondspan2.style.backgroundColor =颜色;
        secondspan2.style.borderColor =颜色;
        $（'＃thecolor'）fadeTo（0，0）。
        $（'＃体'）fadeTo（0，0）。
        $（'＃composeheader'）fadeTo（0，0）。
        thestream.appendChild（body2）;
        thestream.appendChild（thecolor2）;        thestream.appendChild（composeheader2）;
        composeheader2.appendChild（secondspan2）;
        body2.appendChild（thirdspan2）;
            $（'＃thecolor'）removeClass移除（框动画bounceInDown'）;
        $（'泡沫'）removeClass移除（框动画bounceInDown'）。
        $（'＃composeheader'）removeClass移除（框动画bounceInDown'）;
        $（'＃身体）removeClass移除（框动画bounceInDown'）;    }}）;


解决方案

我已经清理这件事了很多，code应该更容易阅读，现在如下：

HTML 

 ＆LT;脚本ID =空消息TYPE =HTML /模板＆GT;
    ＆LT; D​​IV CLASS =消息新盒子动画bounceInDown＆GT;
        ＆LT; D​​IV CLASS =thecolor＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =泡沫＆GT;
            ＆LT;输入类型=文本级=hexcolorVALUE =＃2AC0A3/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =composeheader＆GT;
            ＆LT;输入类型=文本VALUE =写报头，在这里：/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =身体＆GT;
            ＆LT;跨度CONTENTEDITABLE =真＆gt;此处撰写背景下的文字：＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;＆LT; D​​IV ID =消息行动＆GT;
    ＆LT;跨度类=撰写＆GT;撰写＆LT; / SPAN＆GT;
    ＆LT;跨度类=后＆GT;邮政和LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =无上岗＆GT;  - 还没有帖子 - ＆LT; / DIV＆GT;
＆LT; D​​IV ID =全帖＆GT;＆LT; / DIV＆GT;

的JavaScript 

  VAR的getRGB =功能（彩色）{
        变种RGB = color.replace（'＃'，''）;
        RGB = rgb.length === 3？ RGB [0] + RGB [0] + RGB [1] + RGB [1] + RGB [2] + RGB [2]：RGB;        VAR兑换= rgb.match（/ {2} /克）;
        变种R = parseInt函数（CONV [0]，16）+ 156;
        变种G = parseInt函数（CONV [1]，16）; + 46;
        变种B = parseInt函数（CONV [2]，16）; + 67;        RGB = R +'，'+ G +'，'+ B;
        RGB = rgb.replace（/ NaN的/克，'...'）;
        RGB =（'RGB（+ RGB +'）'）;
        返回RGB;
};$（文件）。就绪（函数（）{    $（'＃全帖'）。在（'KEYUP'，'.message.new .hexcolor'，函数（）{
        VAR颜色= $（本）.VAL（）;
        $（message.new .thecolor，.message.new .composeheader。），CSS（背景颜色，颜色）。
        $（message.new。体。）的CSS（背景色，的getRGB（颜色））。
    }）;    $（'＃消息的行为'）。点击（函数（）{        如果（$（）是（'组合'。：可见））{
            $（'＃全帖'）prePEND（$（'＃空消息'），HTML（））;
        }其他{
            变量$消息= $（'＃所有帖子.message：第一'）。removeClass移除（新盒子动画bounceInDown'）;
            $ message.find（'composeheader方式＆gt;输入'）ATTR（'只读'，真）。
            $ message.find（'体方式＆gt;跨度）。ATTR（'CONTENTEDITABLE'，FALSE）;
        }        $（'＃无职位'）隐藏（）。
        $（'组成，.POST）切换（）。    }）;}）;

CSS 

  @import URL（http://fonts.googleapis.com/css?family=Roboto:100）;/ * CSS动画* /.animated {
     -webkit-动画持续时间：1秒;
     -moz-动画持续时间：1秒;
     -ms动画持续时间：1秒;
     -o-动画持续时间：1秒;
     动画持续时间：1秒;
     -webkit-动画填充模式：两者;
     -moz-动画填充模式：两者;
     -ms动画填充模式：两者;
     -o-动画填充模式：两者;
     动画填充模式：两者;
 }
 .animated.hinge {
     -webkit-动画持续时间：2秒;
     -moz-动画持续时间：2秒;
     -ms动画持续时间：2秒;
     -o-动画持续时间：2秒;
     动画持续时间：2秒;
 }
 @ -webkit-关键帧bounceInDown {
     0％{
         -webkit-变换：translateY（-2000px）;
     }
     60％{
         -webkit-变换：translateY（30像素）;
     }
     80％{
         -webkit-变换：translateY（-10px）
     }
     100％{
         -webkit-变换：translateY（）
     }
 }
 @ -moz-关键帧bounceInDown {
     0％{
         -moz-变换：translateY（-2000px）;
     }
     60％{
         -moz-变换：translateY（30像素）;
     }
     80％{
         -moz-变换：translateY（-10px）
     }
     100％{
         -moz-变换：translateY（）
     }
 }
 @ -ms关键帧bounceInDown {
     0％{
         -ms变换：translateY（-2000px）;
     }
     60％{
         -ms变换：translateY（30像素）;
     }
     80％{
         -ms变换：translateY（-10px）
     }
     100％{
         -ms变换：translateY（）
     }
 }
 @ -o-关键帧bounceInDown {
     0％{
         -o变换：translateY（-2000px）;
     }
     60％{
         -o变换：translateY（30像素）;
     }
     80％{
         -o变换：translateY（-10px）
     }
     100％{
         -o变换：translateY（）
     }
 }
 @keyframes bounceInDown {
     0％{
         变换：translateY（-2000px）;
     }
     60％{
         变换：translateY（30像素）;
     }
     80％{
         变换：translateY（-10px）
     }
     100％{
         变换：translateY（）
     }
 }
 .bounceInDown {
     -webkit-动画名称：bounceInDown;
     -moz-动画名称：bounceInDown;
     -ms动画名称：bounceInDown;
     -o-动画名称：bounceInDown;
     动画名称：bounceInDown;
 }
 @ -webkit-关键帧bounceInUp {
     0％{
         -webkit-变换：translateY（2000像素）;
     }
     60％{
         -webkit-变换：translateY（-30px）;
     }
     80％{
         -webkit-变换：translateY（10px的）
     }
     100％{
         -webkit-变换：translateY（）
     }
 }
 @ -moz-关键帧bounceInUp {
     0％{
         -moz-变换：translateY（2000像素）;
     }
     60％{
         -moz-变换：translateY（-30px）;
     }
     80％{
         -moz-变换：translateY（10px的）
     }
     100％{
         -moz-变换：translateY（）
     }
 }
 @ -ms关键帧bounceInUp {
     0％{
         -ms变换：translateY（2000像素）;
     }
     60％{
         -ms变换：translateY（-30px）;
     }
     80％{
         -ms变换：translateY（10px的）
     }
     100％{
         -ms变换：translateY（）
     }
 }
 @ -o-关键帧bounceInUp {
     0％{
         -o变换：translateY（2000像素）;
     }
     60％{
         -o变换：translateY（-30px）;
     }
     80％{
         -o变换：translateY（10px的）
     }
     100％{
         -o变换：translateY（）
     }
 }
 @keyframes bounceInUp {
     0％{
         变换：translateY（2000像素）;
     }
     60％{
         变换：translateY（-30px）;
     }
     80％{
         变换：translateY（10px的）
     }
     100％{
         变换：translateY（）
     }
 }
 .bounceInUp {
     -webkit-动画名称：bounceInUp;
     -moz-动画名称：bounceInUp;
     -ms动画名称：bounceInUp;
     -o-动画名称：bounceInUp;
     动画名称：bounceInUp;
 }
 / * *页/ 身体 {
     背景颜色：＃2D3E50;
     FONT-FAMILY：'的Roboto;
     最小宽度：960像素;
 }
 / *邮件撰写* / 。信息 {
    的margin-top：40像素;
} .composeheader {
     背景颜色：＃2AC0A3;
     颜色：白色;
     填充：10px的15px的;
     明确：两者;
 } .composeheader INPUT {
     颜色：白色;
     字体大小：40像素;
     背景颜色：透明;
     边框宽度：0;
     FONT-FAMILY：'的Roboto;
 } 。身体 {
     最小高度：80px;
     溢出：隐藏;
     填充：20像素;
     背景颜色：＃C6EEE6;
     -moz-箱尺寸：边界盒;
     箱尺寸：边界盒;
     -ms-箱尺寸：边界盒;
     -webkit-箱尺寸：边界盒;
}。体＆GT;跨度 {
     颜色：黑色;
     概述：0像素实心透明;
}。颜色 {
     高度：50像素;
     宽度：50像素;
     背景颜色：＃2AC0A3;
     边界半径：100像素;
     浮动：左;
     保证金底：10px的;
}.bubble {显示：无; } .message.new .bubble {
     高度：50像素;
     填充：0像素;
     背景：#FFFFFF;
     -webkit-边界半径：10px的;
     -moz-边界半径：10px的;
     边界半径：10px的;
     浮动：左;
     保证金左：20像素;
     显示：块;
 } .bubble：{后
     内容：'';
     位置：绝对的;
     边框样式：固体;
     边框宽度：10px的15px的10px的0;
     边框颜色：透明#FFFFFF;
     显示：块;
     宽度：0;
     的z-index：1;
     左：55像素;
     顶部：15px的;
 } .hexcolor {
     字体大小：20像素;
     高度：30PX;
     宽度：100像素;
     背景颜色：透明;
     边框宽度：0像素;
     保证金：10px的5像素
 } / *撰写按钮* / ＃消息行动{
     高度：215px;
     宽度：215px;
     背景颜色：＃EBF1F1;
     边界半径：150像素;
     位置：相对;
     颜色：＃2c3e50;
     -webkit-过渡：所有0.15S线性的;
     -moz-过渡：所有0.15S线性的;
     过渡：所有0.15S线性的;
     浮动：左;
     保证金：100像素40点10px的;
 } ＃消息操作：悬停{
     背景颜色：＃219B86;
     颜色：＃EBF1F1;
 } ＃无职位{
     颜色：白色;
     字体大小：39px;
     浮动：左;
     的margin-top：120像素;
 } .compose {
     字体大小：39px;
     位置：相对;
     左：的22px;
     顶部：960x75像素;
 } {.post的
     颜色：＃2c3e50;
     字体大小：39px;
     位置：相对;
     左：70像素;
     顶部：960x75像素;
     显示：无;
}/ * *邮件/＃所有帖子{
    最小高度：140px;
    宽度：500像素;
    浮动：左;
}

的jsfiddle演示

使用有意义的名称为您的 ID 和CSS类，它使code更容易跟踪和了解到底是怎么回事。样式如firstspan意味着什么和意味着你必须保持在标记回头找出上下文。

<击>我已经清理这件事，尽我所能，我不擅长与CSS3或动画的东西，我将让你来解决这个问题了。我想这应该是正是您正常工作现在，消息滑下，并添加到堆栈顶下来。

编辑2：
我改变了很多ID选择的使用和重构了code，使之变得更加简单。您还分别设置上都是相同的新创建的元素的ID，这是错误的，并会进一步导致你的问题倒行（ID的应该是每页唯一的）。
我清理了JS，结合它与不同的选择做同样的事情多个语句。你使用的是大量的标准JavaScript的的getElementById 键入电话，我改变了这些创建使用jQuery的DOM元素来代替。

我用了一个 HTML /模板脚本声明来创建新的元素，这比使用jQuery建立新的DOM元素干净多了。另外，你的撰写和发布元素基本上是同样的事情。不要重复CSS样式，无论是组合多个选择，或只是重复使用相同的结构，我已经做了。希望的变化是有意义的。

I made a small scale experiment where I was testing an animation that would happen when you repeatedly hit the yellow square, in the jsfiddle below:

http://jsfiddle.net/aritro33/v86tE/5/

However, I am trying to move the animation seen in that jsfiddle to the jsfiddle here when you hit the compose/post circle/button. The animation would be applied to the posts. This is the jsfiddle:

I am having problems however, and after the 3+ times hitting the compose and post button, the animation falls apart.

Any ideas how to put the same animation seen in the first jsfiddle in the second jsfiddle for the posts?

Thanks so much to anyone who can help!

HTML for second experiment:

<div id="compose"><span id="firstspan">Compose</span>
 <span id="fourthspan">Post</span>

</div>
<span id="noposts">- No Posts Yet -</span>

<div id="composeheader">
    <input type="text" id="secondspan" value="Write Header Here:" />
</div>
<div id="thecolor"></div>
<div class="bubble">
    <input type="text" id="thehex" value="#2AC0A3" />
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>

</div>
<ul id="allposts"></ul>

CSS for second experiment:

 @import url(http://fonts.googleapis.com/css?family=Roboto:100);
 body {
     background-color: #2D3E50;
 }

 #compose {
     height: 215px;
     width: 215px;
     background-color: #EBF1F1;
     border-radius: 150px;
     position: relative;
     left: 100px;
     top: 40px;
     color: #2c3e50;
     -webkit-transition: all 0.15s linear;
     -moz-transition: all 0.15s linear;
     transition: all 0.15s linear;
 }
 #compose:hover {
     background-color: #219B86;
     color: #EBF1F1;
 }
 #firstspan {
     font-size: 39px;
     font-family:'Roboto';
     position: relative;
     left: 22px;
     top: 75px;
 }
 #composeheader {
     height: 80px;
     width: 500px;
     background-color:#2AC0A3;
     position: relative;
     bottom: 175px;
     left: 365px;
     color: white;
 }
 #secondspan {
     color: white;
     font-family:'Roboto';
     font-size: 40px;
     position: relative;
     background-color: #2AC0A3;
     border: 1px solid #2AC0A3;
     left: 15px;
     top: 10px;
 }
 #body {
     min-height: 80px;
     overflow: hidden;
     width: 500px;
     background-color: #C6EEE6;
     position: relative;
     left: 365px;
     bottom: 275px;
     padding: 20px;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
 }
 #thirdspan {
     color: black;
     font-family:'Roboto';
     outline: 0px solid transparent;

 }

.thirdspan2{
     color: black;
     font-family:'Roboto';
     outline: 0px solid transparent;
}

 #thecolor {
     height: 50px;
     width: 50px;
     background-color: #2AC0A3;
     border-radius: 100px;
     position: relative;
     left: 365px;
     bottom: 315px;
 }
 .bubble {
     position: relative;
     left: 440px;
     bottom: 365px;
     width: 145px;
     height: 50px;
     padding: 0px;
     background: #FFFFFF;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
 }
 .bubble:after {
     content:'';
     position: absolute;
     border-style: solid;
     border-width: 10px 15px 10px 0;
     border-color: transparent #FFFFFF;
     display: block;
     width: 0;
     z-index: 1;
     left: -15px;
     top: 15px;
 }
 #thehex {
     font-family:'Roboto';
     font-size: 20px;
     height: 30px;
     width: 115px;
     background-color: white;
     position: relative;
     border: 0px none;
     outline: 0px solid transparent;
     top: 10px;
     left: 28px;
 }
 .animated {
     -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
     -ms-animation-duration: 1s;
     -o-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
     -ms-animation-fill-mode: both;
     -o-animation-fill-mode: both;
     animation-fill-mode: both;
 }
 .animated.hinge {
     -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
     -ms-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;
 }
 @-webkit-keyframes bounceInDown {
     0% {
         -webkit-transform: translateY(-2000px);
     }
     60% {
         -webkit-transform: translateY(30px);
     }
     80% {
         -webkit-transform: translateY(-10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInDown {
     0% {
         -moz-transform: translateY(-2000px);
     }
     60% {
         -moz-transform: translateY(30px);
     }
     80% {
         -moz-transform: translateY(-10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInDown {
     0% {
         -ms-transform: translateY(-2000px);
     }
     60% {
         -ms-transform: translateY(30px);
     }
     80% {
         -ms-transform: translateY(-10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInDown {
     0% {
         -o-transform: translateY(-2000px);
     }
     60% {
         -o-transform: translateY(30px);
     }
     80% {
         -o-transform: translateY(-10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInDown {
     0% {
         transform: translateY(-2000px);
     }
     60% {
         transform: translateY(30px);
     }
     80% {
         transform: translateY(-10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInDown {
     -webkit-animation-name: bounceInDown;
     -moz-animation-name: bounceInDown;
     -ms-animation-name: bounceInDown;
     -o-animation-name: bounceInDown;
     animation-name: bounceInDown;
 }
 @-webkit-keyframes bounceInUp {
     0% {
         -webkit-transform: translateY(2000px);
     }
     60% {
         -webkit-transform: translateY(-30px);
     }
     80% {
         -webkit-transform: translateY(10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInUp {
     0% {
         -moz-transform: translateY(2000px);
     }
     60% {
         -moz-transform: translateY(-30px);
     }
     80% {
         -moz-transform: translateY(10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInUp {
     0% {
         -ms-transform: translateY(2000px);
     }
     60% {
         -ms-transform: translateY(-30px);
     }
     80% {
         -ms-transform: translateY(10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInUp {
     0% {
         -o-transform: translateY(2000px);
     }
     60% {
         -o-transform: translateY(-30px);
     }
     80% {
         -o-transform: translateY(10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInUp {
     0% {
         transform: translateY(2000px);
     }
     60% {
         transform: translateY(-30px);
     }
     80% {
         transform: translateY(10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInUp {
     -webkit-animation-name: bounceInUp;
     -moz-animation-name: bounceInUp;
     -ms-animation-name: bounceInUp;
     -o-animation-name: bounceInUp;
     animation-name: bounceInUp;
 }
 #noposts {
     color: white;
     font-size: 39px;
     font-family:'Roboto';
     position: relative;
     left: 440px;
     bottom: 100px;
 }
 #fourthspan {
     color: #2c3e50;
     font-family:'Roboto';
     font-size: 39px;
     position: relative;
     left: 70px;
     top: 75px;
 }

ul#allposts li{
    min-height: 140px;
    width: 500px;


    position: relative;
    left: 239px;
    bottom: 432px;
}

.thecolor2{

    height: 50px;
width: 50px;
    border-radius: 100px;
background-color: #2AC0A3;
    position: relative;
    bottom: 591px;
    left: 325px;
}

ul{
    list-style-type: none;
}

.composeheader2{
  height: 80px;
     width: 500px;
     background-color:#2AC0A3;
     position: relative;
     bottom: 581px;
     left: 325px;
     color: white;

}

.secondspan2{
      color: white;
     font-family:'Roboto';
     font-size: 40px;
     background-color: #2AC0A3;
     border: 1px solid #2AC0A3;
    position: relative;
         left: 17px;
     top: 13px;

}

.body2{
         min-height: 80px;
     overflow: hidden;
     width: 500px;
     background-color: #C6EEE6;
     position: relative;
     left: 325px;
     bottom: 371px;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
}

JS for second experiment:

var clicktwice = false;

var color;
var forrgb;
var finalrgb2;
var myheader;

//198 238 230

//rgb(42, 192, 163) #2AC0A3

//rgb(198, 238, 230) #C6EEE6

//+156, +46, +67

$('#fourthspan').hide();
$('#thecolor').hide();
$('.bubble').hide();
$('#composeheader').hide();
$('#body').hide();

$('#compose').click(function () {

    setInterval(function () {
        $('#noposts').fadeTo(10, 0);
    }, 3000);

});

$("#thehex").keyup(function () {
    color = $("#thehex").val();

    forrgb = $("#thehex").val();
    $("#thecolor").css("background-color", color);
    $("#secondspan").css("background-color", color);
    $("#secondspan").css("border-color", color);
    $("#composeheader").css("background-color", color);
    forrgb = $('#thehex').val().replace('#', '');
    var reg = forrgb.length === 3 ? forrgb[0] + forrgb[0] + forrgb[1] + forrgb[1] + forrgb[2] + forrgb[2] : forrgb;
    var conv = reg.match(/.{2}/g);

    var r = parseInt(conv[0], 16);
    r = r + 156;
    var g = parseInt(conv[1], 16);
    g = g + 46;
    var b = parseInt(conv[2], 16);
    b = b + 67;

    var rgb = r + ',' + g + ',' + b;
    rgb = rgb.replace(/NaN/g, ' ... ');

    var finalrgb = ('rgb(' + rgb + ')');
    finalrgb2 = finalrgb;
    $("#body").css("background-color", finalrgb);

});

$('#compose').click(function () {
    if (clicktwice === false) {
        color = "#2AC0A3";
        finalrgb2 = "rgb(198, 238, 230)";
        $("#secondspan").val("Write Header Here:");
        $('#thirdspan').text("Write context text here:");
                $('#thehex').val(color);
            $("#thecolor").css("background-color", color);
    $("#secondspan").css("background-color", color);
    $("#secondspan").css("border-color", color);
    $("#composeheader").css("background-color", color);
            $("#body").css("background-color", finalrgb2);
         $('#thecolor').fadeTo(0, 1);
        $('#body').fadeTo(0,1);
        $('.bubble').fadeTo(0,1);
        $('#composeheader').fadeTo(0, 1);
        $('#firstspan').hide();
        $('#fourthspan').show();
        $('#thecolor').show();
        $('.bubble').show();
        $('#composeheader').show();
        $('#body').show();

  $(".composeheader2").animate({
    bottom: '-=248px'

  }, 400);

          $(".body2").animate({
    bottom:'-=248px'

  }, 400);

          $(".thecolor2").animate({
    bottom:'-=245px'

  }, 400);

        $('#thecolor').addClass('box animated bounceInDown');
        $('.bubble').addClass('box animated bounceInDown');
        $('#composeheader').addClass('box animated bounceInDown');
        $('#body').addClass('box animated bounceInDown');
        clicktwice = true;
    } else if (clicktwice === true) {

        myheader = $("#secondspan").val();
        $('.bubble').fadeTo(300, 0);
        $('#firstspan').show();
        $('#fourthspan').hide();
        clicktwice = false;
        var thestream = document.getElementById('allposts');

        var oneofpost = document.createElement('li');
        var thecolor2 = document.createElement('div');
        thecolor2.className = "thecolor2";
        var composeheader2 = document.createElement('div');
        composeheader2.className = "composeheader2";
        var secondspan2 = document.createElement('span');
        secondspan2.className = "secondspan2";
        var body2 = document.createElement('div');
        body2.className = "body2";
        var thirdspan2 = document.createElement('span');
        thirdspan2.className = "thirdspan2";




        var bodytext = $('#thirdspan').html();
        thirdspan2.innerHTML = bodytext;
        body2.style.backgroundColor = finalrgb2;
        secondspan2.innerHTML = myheader;
        thecolor2.style.backgroundColor = color;
        composeheader2.style.backgroundColor = color;
        secondspan2.style.backgroundColor = color;
        secondspan2.style.borderColor = color;
        $('#thecolor').fadeTo(0, 0);
        $('#body').fadeTo(0, 0);
        $('#composeheader').fadeTo(0, 0);


        thestream.appendChild(body2);
        thestream.appendChild(thecolor2);

        thestream.appendChild(composeheader2);
        composeheader2.appendChild(secondspan2);
        body2.appendChild(thirdspan2);
            $('#thecolor').removeClass('box animated bounceInDown');
        $('.bubble').removeClass('box animated bounceInDown');
        $('#composeheader').removeClass('box animated bounceInDown');
        $('#body').removeClass('box animated bounceInDown');



    }

});

解决方案

I've cleaned this up A LOT, the code should be much easier to read and follow now:

HTML

<script id="empty-message" type="html/template">
    <div class="message new box animated bounceInDown">
        <div class="thecolor"></div>
        <div class="bubble">
            <input type="text" class="hexcolor" value="#2AC0A3" />
        </div>
        <div class="composeheader">
            <input type="text" value="Write Header Here:" />
        </div>
        <div class="body">
            <span contenteditable="true">Write context text here:</span>
        </div>
    </div>    
</script>

<div id="message-actions">
    <span class="compose">Compose</span>
    <span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>

JavaScript

var getRGB = function(color) {
        var rgb = color.replace('#', '');       
        rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb;

        var conv = rgb.match(/.{2}/g);
        var r = parseInt(conv[0], 16) + 156;
        var g = parseInt(conv[1], 16); + 46;
        var b = parseInt(conv[2], 16); + 67;

        rgb = r + ',' + g + ',' + b;
        rgb = rgb.replace(/NaN/g, ' ... ');
        rgb = ('rgb(' + rgb + ')');
        return rgb;
};

$(document).ready(function() {

    $('#all-posts').on('keyup', '.message.new .hexcolor', function () {
        var color = $(this).val();
        $(".message.new .thecolor, .message.new .composeheader").css("background-color", color);    
        $(".message.new .body").css("background-color", getRGB(color));
    });

    $('#message-actions').click(function () {

        if ($('.compose').is(':visible')) { 
            $('#all-posts').prepend($('#empty-message').html());
        } else {       
            var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown');
            $message.find('.composeheader > input').attr('readonly', true);
            $message.find('.body > span').attr('contenteditable', false);
        }

        $('#no-posts').hide();
        $('.compose, .post').toggle();

    });

});

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100);

/* css for animation */

.animated {
     -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
     -ms-animation-duration: 1s;
     -o-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
     -ms-animation-fill-mode: both;
     -o-animation-fill-mode: both;
     animation-fill-mode: both;
 }
 .animated.hinge {
     -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
     -ms-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;
 }
 @-webkit-keyframes bounceInDown {
     0% {
         -webkit-transform: translateY(-2000px);
     }
     60% {
         -webkit-transform: translateY(30px);
     }
     80% {
         -webkit-transform: translateY(-10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInDown {
     0% {
         -moz-transform: translateY(-2000px);
     }
     60% {
         -moz-transform: translateY(30px);
     }
     80% {
         -moz-transform: translateY(-10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInDown {
     0% {
         -ms-transform: translateY(-2000px);
     }
     60% {
         -ms-transform: translateY(30px);
     }
     80% {
         -ms-transform: translateY(-10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInDown {
     0% {
         -o-transform: translateY(-2000px);
     }
     60% {
         -o-transform: translateY(30px);
     }
     80% {
         -o-transform: translateY(-10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInDown {
     0% {
         transform: translateY(-2000px);
     }
     60% {
         transform: translateY(30px);
     }
     80% {
         transform: translateY(-10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInDown {
     -webkit-animation-name: bounceInDown;
     -moz-animation-name: bounceInDown;
     -ms-animation-name: bounceInDown;
     -o-animation-name: bounceInDown;
     animation-name: bounceInDown;
 }
 @-webkit-keyframes bounceInUp {
     0% {
         -webkit-transform: translateY(2000px);
     }
     60% {
         -webkit-transform: translateY(-30px);
     }
     80% {
         -webkit-transform: translateY(10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInUp {
     0% {
         -moz-transform: translateY(2000px);
     }
     60% {
         -moz-transform: translateY(-30px);
     }
     80% {
         -moz-transform: translateY(10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInUp {
     0% {
         -ms-transform: translateY(2000px);
     }
     60% {
         -ms-transform: translateY(-30px);
     }
     80% {
         -ms-transform: translateY(10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInUp {
     0% {
         -o-transform: translateY(2000px);
     }
     60% {
         -o-transform: translateY(-30px);
     }
     80% {
         -o-transform: translateY(10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInUp {
     0% {
         transform: translateY(2000px);
     }
     60% {
         transform: translateY(-30px);
     }
     80% {
         transform: translateY(10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInUp {
     -webkit-animation-name: bounceInUp;
     -moz-animation-name: bounceInUp;
     -ms-animation-name: bounceInUp;
     -o-animation-name: bounceInUp;
     animation-name: bounceInUp;
 }


 /* page */

 body {
     background-color: #2D3E50;
     font-family:'Roboto';
     min-width: 960px;
 }


 /* message compose */

 .message { 
    margin-top: 40px;
}

 .composeheader {
     background-color:#2AC0A3;
     color: white;
     padding: 10px 15px;
     clear: both;
 }

 .composeheader INPUT {
     color: white;
     font-size: 40px;
     background-color: transparent;
     border-width: 0;
     font-family: 'Roboto';
 }

 .body {
     min-height: 80px;
     overflow: hidden;
     padding: 20px;
     background-color: #C6EEE6;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
}

.body > span {
     color: black;     
     outline: 0px solid transparent;
}

.thecolor {
     height: 50px;
     width: 50px;
     background-color: #2AC0A3;
     border-radius: 100px;
     float: left;
     margin-bottom: 10px;
}

.bubble { display: none; }

 .message.new .bubble {
     height: 50px;
     padding: 0px;
     background: #FFFFFF;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     float: left;
     margin-left: 20px;
     display: block;
 }

 .bubble:after {
     content:'';
     position: absolute;
     border-style: solid;
     border-width: 10px 15px 10px 0;
     border-color: transparent #FFFFFF;
     display: block;
     width: 0;
     z-index: 1;
     left: 55px;
     top: 15px;
 }

 .hexcolor {     
     font-size: 20px;
     height: 30px;
     width: 100px;
     background-color: transparent;
     border-width: 0px;
     margin: 10px 5px
 }

 /* compose button */

 #message-actions {
     height: 215px;
     width: 215px;
     background-color: #EBF1F1;
     border-radius: 150px;
     position: relative;
     color: #2c3e50;
     -webkit-transition: all 0.15s linear;
     -moz-transition: all 0.15s linear;
     transition: all 0.15s linear;
     float: left;
     margin: 40px 100px 10px;
 }

 #message-actions:hover {
     background-color: #219B86;
     color: #EBF1F1;
 }

 #no-posts {
     color: white;
     font-size: 39px;     
     float: left;
     margin-top: 120px;
 }

 .compose {
     font-size: 39px;     
     position: relative;
     left: 22px;
     top: 75px;
 }

 .post {
     color: #2c3e50;     
     font-size: 39px;
     position: relative;
     left: 70px;
     top: 75px;
     display: none;
}

/* messages */

#all-posts {
    min-height: 140px;
    width: 500px;
    float: left;
}

jsFiddle Demo

Use meaningful names for your ids and css classes, it makes the code much easier to follow and understand what is going on. Styles such as "firstspan" mean nothing and means you have to keep looking back at the markup to figure out context.

I've cleaned this up as best I can, I'm not good with CSS3 or the animation stuff, I'll leave it to you to fix that up. I think this should be working exactly as you expect now, messages slide down and are added to the stack top down.

EDIT 2: I changed a lot of the ID selectors to use and refactored the code to make it much simpler. You were also setting the ID on the newly created elements which were all the same, this is wrong and will cause you issues further down the line (ID's should be unique per page). I cleaned up the JS, combining multiple statements which did the same thing with different selectors. You were using a lot of standard JavaScript getElementById type calls, I changed these create the DOM elements using jQuery instead.

I used an html/template script declaration to create the new elements, it's much cleaner than using jQuery to built up your new DOM elements. Also, your compose and post elements were essentially the same thing. Don't repeat CSS styles, either combine multiple selectors, or just re-use the same structure as I have done. Hopefully the changes make sense.

这篇关于网站上的毛刺动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆