Question

我有这个javascript代码：

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

如何实现无限循环，所以这个事件“addClass”和“removeClass”重复无限？

致以最诚挚的问候，谢谢你的回答。

Answer 1

您可以使用setInterval代替setTimeout。 setInterval将创建一个无限期执行的计时器，直到clearInterval被调用。

例如：

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

重新分析您的问题后，

编辑，我认为以下代码可以满足您的需求。基本上，代码使用setInterval来安排一个计时器，该计时器将每隔10秒执行两组addClass / removeClass个调用。您可以根据需要调整持续时间，但不要将其减少到5秒以下，否则会因setTimeout #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);调用冲突而产生问题。

var material = new THREE.ShaderMaterial({
                    uniforms: {
                       tMatCap: {
                            type: 't',
                            value: THREE.ImageUtils.loadTexture('Gold.jpg')
                        },
                        time: {
                            type: 'f',
                            value: 0
                        },
                        bump: {
                            type: 'f',
                            value: 0
                        },
                        noise: {
                            type: 'f',
                            value: .04
                        },
                        useNormal: {
                            type: 'f',
                            value: 0
                        },
                        normalScale: {
                            type: 'f',
                            value: .5
                        },
                        normalRepeat: {
                            type: 'f',
                            value: 1
                        } });

Answer 2

试试这个..

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

Answer 3

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

已更新

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

    });

<强> Demo

Answer 4

为了无限制地执行您的代码，您应该使用setInterval()代替只执行一次事件的setTimeou()，这就是您所需要的：

＆＃13;

    $("#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);

＆＃13;

<div id="aa"></div>
<div id="bb"></div>

＆＃13;

您可以在控制台中看到结果。

修改

要使其成为无限循环，您必须将所有这些代码包装在一个函数中，并且只使用一个setInterval()，因为使用多个可能会损坏您的程序并使用setTimeout()来延迟第二个pragragh bb类更改，这是我提出的功能：

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); }

您可以在 this Fiddle
中查看结果

Answer 5

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>

添加和删除类javascript循环

5 个答案:

添加和删​​除类javascript循环

5 个答案:

添加和删除类javascript循环