The point is that it is necessary to make an ad unit that moves from the bottom to the top and disappears, then reappears from the bottom and so on ad infinitum.

Here is the html:

<ul class="ads-list"> <div> <li><a href="">РЕКЛАМА - ЭТО ХОРОШО</a></li> </div> </ul>

But jQuery:

 $(document).ready(function(){ $(".ads-list > div").animate({ marginTop:"150px", //Сделал вот так, а дальше голова не варит } ,800) })

    2 answers 2

    Solution without js.

    Are you sure you need to use JS? There is an easy way to do pure CSS animations:

     @keyframes my_animation { 0% { margin-top: 100vh; } 100% { margin-top: 0% } } .ads-list > div { animation: my_animation 5s infinite linear; } 
     <ul class="ads-list"> <div> <li><a href="">РЕКЛАМА - ЭТО ХОРОШО</a> </li> </div> </ul>

    And better through transform :

     @keyframes my_animation { 0% { transform: translateY(100vh); } 100% { transform: translateY(0); } } .ads-list > div { animation: my_animation 5s infinite linear; } 
     <ul class="ads-list"> <div> <li><a href="">РЕКЛАМА - ЭТО ХОРОШО</a> </li> </div> </ul>

    • margin is one of the worst performance properties for animation. Better to animate everything using transform . - Sasha Omelchenko
    • @SashaOmelchenko Good, added in reply - Crantisz
    • or you can make the block appear at the bottom when it reaches the top. And then he just disappears (not interesting because) Thank you in advance! :) - As Lan
    • aa, I understood how to do it) You just need to transform: translateY (100vh); on above done) thanks for response - As Lan

    if you need the other way, just set the starting position for the element and move it back

     $(document).ready(function() { setInterval(function() { var a = window.innerHeight; $(".ads-list > div").animate({ marginTop: a, }, 800/*Длительность самой анимации в ms*/, function(){ $(this).css({ marginTop: 0, }); }) }, 1500); // интервал через которий будет повторятса анимация в ms }) 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="ads-list"> <div> <li><a href="">РЕКЛАМА - ЭТО ХОРОШО</a></li> </div> </ul>

    C bottom to top

     $(document).ready(function() { setInterval(function() { var a = window.innerHeight; $(".ads-list > div").animate({ marginTop: 0, }, 800/*Длительность самой анимации в ms*/, function(){ $(this).css({ marginTop: a, }); }) }, 1500); // интервал через которий будет повторятса анимация в ms }) 
     div { marginTop: 1500px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="ads-list"> <div> <li><a href="">РЕКЛАМА - ЭТО ХОРОШО</a></li> </div> </ul>