页面加载时将元素“放置”在适当位置

Question

When my page loads I want to make my logo fade in and move like 20-30px from down to up at the same time. I have this code to make it fade in, and is working perfect:

 $(document).ready(function() { $('#logo').fadeIn(2000); }); 

  #logo { width: 80%; max-width: 650px; padding-top: 50px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 

 <img id="logo" src="assets/img/mainlogo.png" style="display: none" /> 

But I could really use some help to make it move. I read a lot about make JavaScript to add a new class or Id to the element so that class have a different padding top or margin top but I can't make it work.

Thanks in advance.

Answer 1

Try adding

("#logo").css("padding-top", "15px"); 

to your "document ready" function.

Source: http://www.w3schools.com/jquery/jquery_css.asp