Loop анимация не работает

Question

НУЖНА ЭТА В JS

Я пытаюсь сделать анимацию, которая скользит облако с правой стороны коробки на левую сторону. Имея это в виду, облако должно появляться как исчезающее и исчезающее с каждой стороны. Затухание должно быть, пока облако движется.

Я пытаюсь сделать эту непрерывную анимацию, не вызывая ее рекурсивно, используя setInterval.

Однако по какой-то причине - это не работает, я связал пример и код. https://jsfiddle.net/tes1ey3L/2/

Exmaple не работает, но вы получаете эту идею. - Затухайте, пока сползаете на другую сторону и исчезаете. Затем сначала.

animateC(); 
 
setInterval(animateC(),35000); 
 

 
function animateC() { 
 
    $('#animationCloud').css('left', '680px'); 
 
    $('#animationCloud').parent().animate({queue:false, opacity: 1 }, 5000, 'linear'); 
 
    $('#animationCloud').animate({ left: -161 }, 35000, 'linear'); 
 
    $('#animationCloud').parent().delay(25000).animate({ opacity: 0.0 }, 5000, 'linear'); 
 
}

#container { 
 
    width: 680px; 
 
    height: 200px; 
 
    background-color: blue; 
 
    margin-left: 170px; 
 
} 
 

 
#animationCloud { 
 
    background-color: white; 
 
    width: 161px; 
 
    height: 150px; 
 
    text-align: center; 
 
    border-radius: 10px; 
 
    line-height: 150px; 
 
    position: relative; 
 
} 
 

 
#parent { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    opacity: 0.0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="parent"> 
 
     <div id="animationCloud"> 
 
      Im a cloud 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Функция setInterval следует осуществлять без () после функции.

Я исправил ваш код. Попробуйте использовать что-то вроде этого:

function animateC() { 
    $('#animationCloud').css('left', '680px'); 
    $('#animationCloud').parent().animate({queue:false, opacity: 1 }, 3000, 'linear'); 
    $('#animationCloud').animate({ left: -161 }, 3000, 'linear'); 
    $('#animationCloud').parent().delay(1000).animate({ opacity: 0.0 }, 3000, 'linear'); 
} 

animateC(); 
setInterval(animateC,3100); 

Answer 2

Как насчет использования анимации CSS?

.bg { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: lightblue; 
 
} 
 

 
.cloud { 
 
    width: 100px; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    background-color: white; 
 
    border-radius: 10px; 
 
    padding: 10px; 
 
    margin: 100px 0; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    animation-name: move; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease-in-out; 
 
} 
 

 
@keyframes move { 
 
    0% { 
 
     left: 0%; 
 
     opacity: 0; 
 
    } 
 
    20% { 
 
     opacity: 1; 
 
    } 
 
    80% { 
 
     opacity: 1; 
 
    } 
 
    100% { 
 
     left: 100%; 
 
     opacity: 0; 
 
    } 
 
}

<div class="bg"> 
 
    <div class="cloud">I'm in a cloud!</div> 
 
</div>