Div открывается вертикально, когда страница загружается с помощью javascript и css

Im новое для веб-разработки и хотел бы знать, есть ли способ сделать div открытым по вертикали без использования переходов высоты css. Мне также пришлось добавить переход непрозрачности в div с текстом с момента его показа до появления главного div. Вот демо http://jsfiddle.net/wq7v7/Div открывается вертикально, когда страница загружается с помощью javascript и css

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
window.onload = function(){ 
    document.getElementById("body").setAttribute("class","loaded"); 
} 
</script> 
<style type="text/css"> 
    .fadein { 
    height: 0px; 
    transition: height 0.7s; 
    -moz-transition: height 0.7s; 
    -webkit-transition: height 0.7s; 
    -o-transition: height 0.7s; 
    background-color: #39F; 
    width: 600px; 
    border-top-width: 2px; 
    border-bottom-width: 2px; 
    border-top-style: solid; 
    border-bottom-style: solid; 
    border-top-color: #000; 
    border-bottom-color: #000; 
    } 

    #body.loaded .fadein { 
     height: 200px; 
     opacity: 1; 
    } 
    .thebox { 
    opacity: 0; 
    transition: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    -webkit-transition: opacity 0.5s; 
    -o-transition: opacity 0.5s; 
    } 

    #body.loaded .thebox { 
     opacity: 1; 
    } 
</style> 
</head> 

<body id="body"> 


    <div class="fadein"> 

     <div class="thebox" style="text-align:center; color:#000; font-size:24px; font-family:'Myriad Pro'; margin-top:10px;"> 

     Choose your city 

     </div> 

    </div> 

</body> 
</html>

источник

2013-09-17 Javier Lopez

Если вы используете jQuery это просто. И в будущем не используйте анимацию на body. Используйте его для внутреннего div. Вот fiddle

источник

2013-11-01 22:18:02 BordiArt

Большое спасибо –

Рад помочь вам;) – BordiArt

Div открывается вертикально, когда страница загружается с помощью javascript и css

ответ

Смежные вопросы