JQuery,animate() - как сделать анимированный блок

242
15 февраля 2017, 23:43

Дело таково что надо сделать рекламный блок который движется снизу на вверх и исчезает, затем опять появляется снизу и так до бесконечности.

Вот html:

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

А вот JQuery:

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

А вы уверены, что нужно обязательно использовать JS? Есть простой способ делать анимацию на чистом CSS:

@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>

А лучше через 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>

Answer 2

если надо в другую сторону, просто задайте начальную позицию елементу а движение обратно 

$(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 низу в верх 

$(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>

READ ALSO
Не срабатывает AJAX JQuery в IE11
jQuery

Не срабатывает AJAX JQuery в IE11

Есть такой код:

 322
Не cрабатывает в css &ldquo;background-image&rdquo;
CSS

Не cрабатывает в css “background-image”

Помогите пожалуйста, почему фоновое изображение не появляется? Если просто как картинку вставить в HTML - то всё в порядке, а как фоновое изображение...

 247
Слетели стили на IE
CSS

Слетели стили на IE

В Хроме, Опере, Мазиле со стилями всё ок, в ИЕ ощущение, что даже не включались, что делать в такой ситуации ? Есть вот такая штука в коде, но судя...

 312
Что такое полиморфизм [требует правки]
c++

Что такое полиморфизм [требует правки]

"Полиморфизм это способность обеспечить один и тот же интерфейс для классов с разной реализациейОн помогает упростить код с помощью абстракции

 282