Рекурсия в функции в jQuery

Question

Хочу сделать постоянно мигающую кнопку в меню. Это возможно вообще сделать на JS, если язык однопоточный?

Есть простейший скрипт, на примере метода animate():

$( document ).ready(function(){
    $( "div" ).animate({
        width: "90%", // ширина элемента
        opacity: 0.5, // прозрачность элемента
        height: "150px", // высота элемента
        fontSize: "2em", // размер шрифта элемента
        borderWidth: "5px", // ширина границ элемента
    });
});

Подскажите, как реализовать повторение этой функции (зациклить) без перезагрузки страницы?

Заранее благодарю!

Answer 1

Например так:

function loop() {
    $( "div" ).animate({
        width: "90%", // ширина элемента
        opacity: 0.5, // прозрачность элемента
        height: "150px", // высота элемента
        fontSize: "2em", // размер шрифта элемента
        borderWidth: "5px", // ширина границ элемента
    }, {
        // duration: 5000, 
        // easing: 'linear', 
        complete: loop
    });
}

loop();

Потому что по документации (https://api.jquery.com/animate/) есть такой синтаксис .animate( properties, options ). В properties данные анимации, а в options дополнительные данные (длительность анимации, тип, что сделать по окончании и пр.)

function loop() {
    $( "div" ).css({'opacity': 1});
    $( "div" ).animate({
        width: "90%", // ширина элемента
        opacity: 0.5, // прозрачность элемента
        height: "150px", // высота элемента
        fontSize: "2em", // размер шрифта элемента
        borderWidth: "5px", // ширина границ элемента
    }, {
        duration: 500, 
        // easing: 'linear', 
        complete: loop
    });
}

loop();

div {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div></div>

Answer 2

Постоянно мигающую кнопку можно сделать вообще без js, на чистом css. Вот самый простой вариант для примера:

button {
  display: block;
  margin: 20px auto;
  padding: 10px 15px;
  border: 1px solid red;
  border-radius: 5px;
  font-size: 20px;
  background-color: red;
  animation: puls 1.5s linear infinite;
}
@keyframes puls {
  0% {background-color: red;}
  100% {background-color: white;}
}

<button>Мигающая кнопка</button>

БЛОГ НА HUSL

Рекурсия в функции в jQuery

Ответы (2 шт):