动画文本函数回调jquery

Question

我在这里遇到问题http://test10.bitballoon.com/ 我有动画（显示/隐藏）text.first文本有类“活动”。动画显示此文本然后删除类“活动”并将此类添加到下一个文本并再次回调函数..该函数还检查最后一个文本是否具有类“活动”然后删除并将类“活动”添加到第一个文本并再次隐藏所有文本和回调。这是怎么回事。第一次工作正常，当动画再次完成回调并动画第一个文本好，然后函数添加“活动”到多个文本然后所有文本和功能中断。我不知道为什么会发生这种情况我试图使用setInterval但是同样的问题

function animateText() {
    "use strict";        
    if ($(".text-container .active").hasClass("left")) {
        $(".text-container .active").addClass("active");
        $(".text-container .active").delay(1000).animate({
            marginLeft: 0,
            opacity: 1
        }, 700, function() {
            if ($(".text-container .text:last").hasClass("active")) {
                $(".text-container .text:last").removeClass("active")
                $(".text-container .text").animate({
                    opacity: 0
                }, 700, function() {
                    $(".text-container .text:first").addClass("active");
                    animateText();
                })
            }
            $(".text-container .active").removeClass("active").next().addClass("active");
            animateText();
        });
    } else if ($(".text-container .active").hasClass("right")) {
        $(".text-container .active").addClass("active");
        $(".text-container .active").delay(1000).animate({
            marginRight: "5px",
            opacity: 1
        }, 700, function() {
            if ($(".text-container .text:last").hasClass("active")) {
                $(".text-container .text:last").removeClass("active")
                $(".text-container .text").animate({
                    opacity: 0
                }, 700, function() {
                    $(".text-container .text:first").addClass("active");
                    animateText();
                })
            }
            $(".text-container .active").removeClass("active").next().addClass("active");
            animateText();
        });
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
    <div class="text left active">
        <p>Hello World</p>
    </div>
    <div class="text left">
        <p>Hello World2</p>
    </div>
    <div class="text right">
        <p>Hello World3</p>
    </div>
    <div class="text right">
        <p>Hello World4</p>
    </div>
    <div class="text left">
        <p>Hello World5</p>
    </div>
    <div class="text right">
        <p>Hello World6</p>
    </div>
</div>

Answer 1

只要涉及此动画，就不会使用课程const william = new Human(); const data = {}; // new empty object Object.defineProperty( data, 'num', { enumerable: true, configurable: true, writable: true, get: function() { return this.human.eyes; }, set: function(newValue) { this.human.eyes = newValue; } } ); // Need to give `data` a reference to the `Human`: data.human = william; william.addEye(); william.addEye(); console.log( data.num ); // outputs "2" data.num++; console.log( william.eyes ); // outputs "3" 。注意我在片段中添加了一些css来容纳它，所以请告诉我它是否有帮助。

.active

$(document).ready(function() {
                animateText($(".text-container .active"));
            });

            function animateText($this) {
                var leftParams = {'left': 0, opacity: 1};
                var rightParams = {'right': 0, opacity: 1};

                $this.stop(true).animate(
                        ($this.hasClass('left') ? leftParams : rightParams),
                        1000, function() {
                            if ($this.next().presence())
                                animateText($this.next());
                            else
                                startOver();
                        }
                );
            }

            function startOver() {
                var selector = $(".text-container .text");
                var next = $(".text-container > .active");
                selector.animate({
                    opacity: 0
                }, 200, function() {
                    selector.filter('.left').css('left', -200);
                    selector.filter('.right').css('right', -200);
                    animateText(next);
                });
            }

            $.fn.presence = function() {
                return this.length !== 0 && this;
            };

.text-container {
	display: inline-block;
	width: 260.4px;
	height: 419px;
	
	
	padding-top: 10px;
	padding-left: 5px;
	overflow: hidden;
  
}

.text-container .text {
	max-width: 225px;
	float: left;
	padding: 8px 9px;
	margin-bottom: 6px;
	border-radius: 20px;
	text-align: left;
	background-color: rgba(224,230,237,.5);
	clear: both;
	opacity: 0;
  position: relative;
  
}

.text-container .left {
    float: left;
    left: -200px;
    
}

.text-container .right {
    float: right;
    right: -200px;
    background-color: #1bb45e;
}