Анимация текстовая функция обратного вызова jquery

У меня здесь проблема http://test10.bitballoon.com/ У меня есть анимация (показать / скрыть) текст. Первый текст имеет класс «активный». анимация показывает этот текст, затем удаляет класс «активный» и добавляет этот класс к следующему тексту и снова выполняет обратный вызов функции. функция также проверяет, имеет ли последний текст класс «активный», затем удаляет и добавляет класс «активный» к первому текст и снова скрыть весь текст и обратный вызов. вот как это работает. в первый раз все работает нормально, когда анимация завершает обратный вызов снова и анимирует первый текст хорошо, затем функция добавляет «активный» к нескольким текстам, затем весь текст и разрыв функции. я не знаю, почему это произошло, я пытался использовать 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>

if ($(".text-container .active").hasClass("left")) {... Ни один из дочерних div не имеет класса left. Когда это должно быть правдой?

— 20.03.2018 18:31

оставленный класс добавлен перед функцией анимации .. вы можете проверить test10.bitballoon.com

— 20.03.2018 18:33

javascript jquery

20.03.2018 18:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Что касается этой анимации, класс .active бесполезен. Обратите внимание, что я добавил немного CSS, чтобы разместить его во фрагменте, поэтому дайте мне знать, если это поможет.

$(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;
}

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

Большое вам спасибо, я очень ценю ваши усилия.

— 20.03.2018 21:31

20.03.2018 21:20