CODEWITHSUNDEEP
javascriptcsshtmlanimation
Aleksandar Popovic
Aleksandar Popovic

Reputation: 47

Add and remove class javascript loop

I have this javascript code: 

<script type="text/javascript">
    $("#aa").addClass("animatedaa fadeIn");
    setTimeout(function () {
        $("#aa").removeClass("animatedaa fadeIn"),
                $("#aa").addClass("animatedaaout fadeOut");
    }, 3500);

    $("#bb").addClass("animatedbb fadeIn");
    setTimeout(function () {
        $("#bb").removeClass("animatedbb fadeIn"),
                $("#bb").addClass("animatedbbout fadeOut");
    }, 5000);
</script>

How can I achieve to make infinite loop, so this events "addClass" and "removeClass" repeat infinite?

Best regards and thank you for your answers.

Upvotes: 1

Views: 2859

Answers (5)

cнŝdk
cнŝdk

Reputation: 32145

To make an infinite execution of your code you should use setInterval() instead of setTimeou() which execute an event only once , here's what you need:

    $("#aa").addClass("animatedaa fadeIn");
        console.log("aa***animatedaaout fadeIn");
    setInterval(function () {
        $("#aa").removeClass("animatedaa fadeIn"),
                $("#aa").addClass("animatedaaout fadeOut");
       console.log("aa***animatedaaout fadeOut");
    }, 3500);

    $("#bb").addClass("animatedbb fadeIn");
console.log("bb***animatedaaout fadeIn");
    setInterval(function () {
        $("#bb").removeClass("animatedbb fadeIn"),
                $("#bb").addClass("animatedbbout fadeOut");
        console.log("bb***animatedaaout fadeOut");
    }, 5000);
<div id="aa"></div>
<div id="bb"></div>

You can see the result in the console.

EDIT:

To make it infinite loop you have to wrap all these code inside a function and use only one setInterval(), because using more than one can damage your program and use a setTimeout() to delay the second pragragh bb class Changes, this is the function that I came up with:

function removeClass() {
    $("#aa").addClass("animatedpone fadeIn");
    $("#bb").addClass("animatedptwo fadeIn");
    var fadeIn = true;
    setInterval(function () {
        if (fadeIn === true) {
            $("#aa").removeClass("animatedpone fadeIn");
            $("#aa").addClass("animatedponeout fadeOut");
            setTimeout(function () {
                $("#bb").removeClass("animatedptwo fadeIn");
                $("#bb").addClass("animatedponeout fadeOut");
            }, 1000);
            fadeIn = false;
            } else {
            $("#aa").removeClass("animatedpone fadeOut");
            $("#aa").addClass("animatedponein fadeIn");
            setTimeout(function () {
                $("#bb").removeClass("animatedptwo fadeOut");
                $("#bb").addClass("animatedponein fadeIn");
            }, 1000);
            fadeIn = true;
        };
    }, 5000);
}

You can see the results in this Fiddle

Upvotes: 0

Cristik
Cristik

Reputation: 32853

You can use setInterval instead of setTimeout. setInterval will create a timer that will execute indefinitely until clearInterval is called.

For example:

setInterval(function () {
    $("#aa").removeClass("animatedaa fadeIn"),
    $("#aa").addClass("animatedaaout fadeOut");
}, 3500);

Edit: after re-analysing your question, I think the following code would do what you need. Basically the code uses setInterval to schedule a timer that will execute every 10 seconds the two sets of addClass/removeClass calls. You can tweak the duration to match what you need, however don't reduce it below 5 seconds, otherwise it create problems due to conflicts with the setTimeout call for #bb.

setInterval(function() {
    $("#aa").addClass("animatedaa fadeIn");
    setTimeout(function () {
        $("#aa").removeClass("animatedaa fadeIn"),
        $("#aa").addClass("animatedaaout fadeOut");
    }, 3500);

    $("#bb").addClass("animatedbb fadeIn");
    setTimeout(function () {
        $("#bb").removeClass("animatedbb fadeIn"),
        $("#bb").addClass("animatedbbout fadeOut");
    }, 5000);
}, 10000);

Upvotes: 2

ozil
ozil

Reputation: 7117

<script type="text/javascript">

$(document.ready(function(){    // if you want to call this function on document ready
  addRemoveClass();

}));

function addRemoveClass(){
  $("#aa").addClass("animatedaa fadeIn");
    setTimeout(function () {
        $("#aa").removeClass("animatedaa fadeIn"),
                $("#aa").addClass("animatedaaout fadeOut");
    }, 3500);

    $("#bb").addClass("animatedbb fadeIn");
    setTimeout(function () {
        $("#bb").removeClass("animatedbb fadeIn"),
                $("#bb").addClass("animatedbbout fadeOut");
    }, 5000);

    addRemoveClass();
}

</script>

updated 

$(document).ready(function(){    // if you want to call this function on document ready
      addRemoveClass();

    });

Demo

Upvotes: 0

Puneet
Puneet

Reputation: 2051

function addRemoveClass(){
  $("#aa").show('slow');
    setTimeout(function () {
        $("#aa").show('slow').hide('slow');
        
    }, 3500);

    $("#bb").show('slow');
    setTimeout(function () {
        $("#bb").show('slow').hide('slow');
        addRemoveClass();
    }, 5000);

    
}


      addRemoveClass();



Try this.
I haven't used the classes but simple Show and Hide methods of the jQuery. You can change it according to your need.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="aa" class="">asdasdad</p>
<p id="bb" class="">asdasd</p>

Upvotes: 0

Sarath Kumar
Sarath Kumar

Reputation: 2353

try this..

setTimeout(function () {
    $('#aa').toggleClass('animatedaa fadeIn');
}, 3500);

Upvotes: 1

Related Questions