Как я могу циклически перемещать анимацию в jQuery?

Мне нужно знать, как бесконечно зацикливать эту анимацию. Это текстовая анимация прокрутки, и мне нужно ее повторить после ее завершения.

Вот jQuery:

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        $(".boxtext").ready(function(){
            $(".boxtext").animate({bottom:"600px"},50000);
        });
    });
</script>

Вот CSS для ".boxtext"

.boxtext {
    position:absolute;
    bottom:-300px;
    width:470px;
    height:310px;
    font-size:25px;
    font-family:trajan pro;
    color:white;
}

Ответы

Ответ 1

Сделайте это функцией и вызовите ее как обратный вызов:

$(document).ready(function(){
    scroll();
}

function scroll() {
    $(".boxtext").css("bottom", "-300px");
    $(".boxtext").animate({bottom:"600px"}, 50000, scroll);
}

Имейте в виду, что это не будет очень жидким.

EDIT: Я не думал раньше. Моя ошибка.

Ответ 2

Следующее должно работать.

$(document).ready(function(){
    animateTheBox();
}); 

function animateTheBox() {
    $(".boxtext").animate({bottom:"600px"}, 50000, animateTheBox);
}

Ответ 3

возможно, самое простое решение.

var movement1 = function(speed){
  $(".mydiv").animate({"top": "100px"}, speed,function(){
      movement2(speed)
  });
}


var movement2 = function(speed){
  $(".mydiv").animate({"top": "120px"}, speed,function(){
      movement1(speed)
  });
}

  movement1(1000);

это, в конечном счете, бесконечно вызывает друг друга.

Ответ 4

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> 

$(function () {    
        move();
        });
function move(){
     $(".boxtext").ready(function(){
     $(".boxtext").animate({bottom:"600px"},50000,function(){
         $(".boxtext").css({"bottom":0}, move););

 });move();
 });
 </script>

Ответ 5

Попробуйте это для анимации непрерывного цикла при наведении курсора.

function loopl(){
    $('.mCSB_container').animate({ "left": "+=80px" }, "800", 'linear', loopl  );
    }    

function loopr(){
        $('.mCSB_container').animate({ "left": "-=80px" }, "800", 'linear', loopr  );
    }
    function stop(){
        $('.mCSB_container').stop();
    }
    $( "#left" ).hover(loopl, stop);
    $( "#right" ).hover(loopr, stop);

Ответ 6

yourloop = setInterval(function() {
  // tasks
}, timeInMilliseconds );

Наслаждайтесь!

Ответ 7

Используйте setInterval. Таким образом, вы можете бесконечно повторять функцию через определенный интервал, например каждую секунду.

Ответ 8

<script type="text/javascript"> 
var e = document.getElementByClassName('boxtext')[0].style.bottom;
function reset(){
if(e === "599px"){e === 0 + "px"}
else{b += 1000}
}
setInterval(reset(),1);

$(document).ready(function(){
    $(".boxtext").ready(function(){
        $(".boxtext").animate({bottom:"600px"},b);
    });
});

</script>

idont no, но я думаю, должен был использовать javascript

Ответ 9

Вот так:

<script>
$(document).ready(function()
{
    $(window).load(function()
    {
        var a="#bijin"
        var x=1000
        var y=1000

        for (var i=1 ; i<=100000 ; i++){
            $(a).slideUp(x).slideDown(y);  
        }
    });
});

</script>

Пример: http://www.hpcreating.com/effect/jquery2/slide4.html