当其他出现时保持div静态

时间：2014-01-16 16:40:34

标签： javascript jquery html css animation

我有一个jsfiddle如下： http://jsfiddle.net/aritro33/uX7HG/

我有一个问题，当你点击撰写按钮时，出现的帖子会略微下推，但显然会被几秒钟后弹出的颜色排列。当弹出颜色排列时，如何防止帖子移动？

谢谢！

HTML：

<div id="red" class = "color"></div>
<div id="orange" class = "color"></div>
<div id="yellow" class = "color"></div>
<div id="green" class = "color"></div>
<div id="turquoise" class = "color"></div>
<div id="blue" class = "color"></div>
<div id="purple" class = "color"></div>
<div id="gray" class = "color"></div>
<div id="composeheader">

    <input type="text" id="secondspan" value="Write Header Here:" />
        <div id = "sidebarhex"></div>
    <div id = "taghex"><span id = "withhex" contenteditable = "true">#2AC0A3</span></div>
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>

</div>

CSS：

#red {
     background-color: #2ac0a3;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     position: relative;
     bottom: 220px;
     left: 365px;
 }
 #orange {
     background-color: #25ac92;
     position:relative;
     bottom:236px;
     left: 405px;
 }
 #yellow {
     position: relative;
     bottom: 252px;
     left: 445px;
     background-color:#219982;
 }
 #green {
     position: relative;
     left: 485px;
     bottom: 268px;
     background-color: #1d8672;
 }
 #turquoise {
     position: relative;
     left: 525px;
     bottom: 284px;
     background-color: #197361;
 }
 #blue {
     position: relative;
     left: 565px;
     bottom: 300px;
     background-color: #156051;
 }
 #purple {
     position: relative;
     left: 605px;
     bottom: 316px;
     background-color: #104c41;
 }
 #gray {


     position: relative;
     left: 645px;
     bottom: 332px;
     background-color: #0c3930;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
 }



#composeheader {
     height: 80px;
     width: 500px;
     background-color:#2AC0A3;
     position: relative;
     bottom: 320px;
     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: 100px;
     overflow: hidden;
     width: 500px;
     background-color: #C6EEE6;
     position: relative;
     left: 365px;
     bottom: 320px;
     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;
 }
#sidebarhex{
    height: 30px;
    width: 7px;
    background-color: #156051;
    position: relative;
    left: 500px;
    bottom: 30px;

}

#taghex{
    height: 30px;
    width: 80px;
    background-color: #219982;
    position: relative;
    left: 420px;
    bottom: 60px;
}

#withhex{
    font-family: 'Roboto';
    position: relative;
    top: 4px;
    left: 9px;
    border: 0px solid transparent;
    outline: none;
}

.color{
    height: 16px;
    width: 40px;
}



#red.active{
    height: 16px;
    width: 45px;
    z-index: 1;
    border: 3px solid white;
    position: relative;
    bottom: 218px;
}




#orange.active{
    height: 16px;
    width: 45px;
    z-index: 1;
    border: 3px solid white;
    position: relative;
    bottom: 233px;
}

#red.orangeselected{
   position: relative;
    bottom: 215px;

}

动画CSS：

 .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;
 }
 @-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;
 }

JS：

$('#red').click(function(){
    $('#red').addClass('active');
        $('#red').removeClass('orangeselected');
        $('#orange').removeClass('active');
});

$('#orange').click(function(){
    $('#orange').addClass('active');
        $('#red').removeClass('active');
    $('#red').addClass('orangeselected');
});
 $('#sidebarhex').fadeTo(0,1);

        $('#thecolor').addClass('box animated bounceInDown');
        $('.bubble').addClass('box animated bounceInDown');
        $('#composeheader').addClass('box animated bounceInDown');
        $('#body').addClass('box animated bounceInDown');
        setTimeout(function () {
            setTimeout(function () {
                $('#red').fadeTo(0, 400);
                $('#orange').fadeTo(0, 400);
                $('#yellow').fadeTo(0, 400);
                $('#green').fadeTo(0, 400);
                $('#turquoise').fadeTo(0, 400);
                $('#blue').fadeTo(0, 400);
                $('#purple').fadeTo(0, 400);
                $('#gray').fadeTo(0, 400);
            }, 400);
            $('#red').addClass('box animated bounceInUp');
            $('#orange').addClass('box animated bounceInUp');
            $('#yellow').addClass('box animated bounceInUp');
            $('#green').addClass('box animated bounceInUp');
            $('#turquoise').addClass('box animated bounceInUp');
            $('#blue').addClass('box animated bounceInUp');
            $('#purple').addClass('box animated bounceInUp');
            $('#gray').addClass('box animated bounceInUp');

        }, 500);

        setTimeout(function(){
            $('#red').addClass('active');
        }, 1050);

0 个答案:

没有答案
相关问题
最新问题