Проблема с анимацией букв в jQuery + CSS - PullRequest
Новая
       1

Проблема с анимацией букв в jQuery + CSS

0 голосов
/ 19 февраля 2020

Я пытаюсь оживить строку, если над ней наведено название. (превращая его в массив и вытягивая разные анимации на каждую букву) Анимации работают отлично, но у меня есть одна проблема.

как только я наведу курсор мыши на элемент (mouseenter) во второй раз, код покажет пользователю все теги внутри элемента наведены так:

Код ниже. если вы наведите курсор на имя дважды, вы увидите проблему. какие-либо предложения о том, как это исправить?

JSfiddle: 

$(function() {

    var $win = $(window),
        w = 0,
        h = 0,
        rgb = [],
        getWidth = function() {
            w = $win.width();
            h = $win.height();
        };

    $win.resize(getWidth).mousemove(function(e) {

        rgb = [
            Math.round(e.pageX / w * 255),
            Math.round(e.pageY / h * 255),
            150
        ];

        $(document.body).css('background', 'rgb(' + rgb.join(',') + ')');

    }).resize();


    $('.firstName').on('mouseenter', function () {
        let firstNameArray = $('.firstName').html().split(' ')[0].split('');
        let lastNameArray = $('.firstName').html().split(' ')[1].split('');
        $('.firstName').html('');
        for (letter of firstNameArray) {
            let radomizer = Math.floor(Math.random() * 3);
            $('.firstName').append(`<span class='animation${radomizer}'>${letter}</span>`);
        }
        $('.firstName').append(' ')
        for (letter of lastNameArray) {
            let radomizer = Math.floor(Math.random() * 3);
            $('.firstName').append(`<span class='animation${radomizer}'>${letter}</span>`);
        }
        
    });

});
.firstBox {
    margin-top: 10rem;
}

.firstBox>div {
    margin-top: 3rem;
}

div>h1 {
    color: white;
    font-size: 55px;
    text-shadow: 2px black solid;
}

.animation0 {
    animation: letterrotate 1.5s forwards;
    display: inline-block;
}

.animation1 {
    animation: lettermovedown 1.5s forwards;
    display: inline-block;
}

.animation2 {
    animation: lettermoveup 1.5s forwards;
    display: inline-block;
}


@keyframes letterrotate {
    0% {
        transform: rotate(100deg);
    }
    50% {
        transform: rotate(250deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes lettermovedown {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes lettermoveup {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Eden Hazani</title>
</head>

<body>
    <div class="container text-center">
        <div class="row">
            <div class="col">
                <div class="firstBox">
                    <div data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-delay="100">
                        <h1 class="firstName">Eden Hazani</h1>
                    </div>
                    <div data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-delay="450">
                        <h1>Not Your Avarage</h1>
                    </div>
                    <div data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-delay="750">
                        <h1>Web Developer</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="secondBox">

                </div>
            </div>
        </div>
    </div>
    <script src="main.js"></script>
    <script>
        AOS.init();
    </script>

</body>

</html>

1 Ответ

0 голосов
/ 19 февраля 2020

Это происходит потому, что вы изменили html внутри класса firstName при вводе мышью. Мой совет - просто измените событие html после указателя мыши, т.е. 

        $('.firstName').on('mouseout', function () {
             $(this).html('Eden Hazani');
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...