Скрипт работает не так javascript, можно ли что то с эти сделать?

Question

[cedFlame]

У меня есть скрипт который при наведении курсора на текст генерирует множество элементов и расставляет их по нужным местам, а при отведении курсора от текста плавно удаляет все элементы. Проблема в том что этот скрипт работает только один раз.
Вот код:

<script>
        var id
        let j = 1
        $('.main-i').hover(function () {
            $(document).ready(function () {
                let a = $('.main-i').offset()
                for (i = 1; i <= 9; i++) {
                    $('.pc-spans').append('<span data-class="span-i" data-id=' +
                        i + ' class="i-am-os">text</span>')
                    $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top + i * 13, left: a.left + i ** 2 })
                }
                $('.pc-spans').append('<span data-class="span-i" data-id=' +
                    10 + ' class="i-am-os">text</span>')
                $('.i-am-os[data-id="' + 10 + '"]').offset({ top: a.top + 10 * 13, left: a.left + 50 + 10 ** 2 })
                for (i = 11; i <= 22; i++) {

                    $('.pc-spans').append('<span data-class="span-i" data-id=' +
                        i + ' class="i-am-os">text</span>')
                    $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top - (i - 20) * 13, left: a.left - (i - 22) ** 2 + 360 })

                }
            })
        }, function () {
            id = setInterval(function () {
                $('.i-am-os[data-id="' + j + '"]').animate({
                    opacity: '0',
                    olor: '#00000000'
                }, 100, function () {
                    $(this).remove()
                    console.log(j)
                })
                if (j > 22) {
                    clearInterval(id);
                } else {
                    j++
                }
            }, 100);
        })

    </script>

Answer 1

[Valeriu Cuțebov]

Для того, чтобы скрипт работал не только один раз, вам нужно добавить функцию, которая будет удалять все созданные элементы после их анимации. Для этого вы можете использовать метод .empty() или .remove() для удаления всех созданных элементов.

Вот как может выглядеть обновленный код:

<script>
    let id;
    let j = 1;

    $('.main-i').hover(function() {
        let a = $('.main-i').offset();
        for (let i = 1; i <= 9; i++) {
            $('.pc-spans').append('<span data-class="span-i" data-id=' + i + ' class="i-am-os">text</span>');
            $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top + i * 13, left: a.left + i ** 2 });
        }
        $('.pc-spans').append('<span data-class="span-i" data-id=' + 10 + ' class="i-am-os">text</span>');
        $('.i-am-os[data-id="' + 10 + '"]').offset({ top: a.top + 10 * 13, left: a.left + 50 + 10 ** 2 });
        for (let i = 11; i <= 22; i++) {
            $('.pc-spans').append('<span data-class="span-i" data-id=' + i + ' class="i-am-os">text</span>');
            $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top - (i - 20) * 13, left: a.left - (i - 22) ** 2 + 360 });
        }
    }, function() {
        id = setInterval(function() {
            $('.i-am-os[data-id="' + j + '"]').animate({
                opacity: '0',
                color: '#00000000'
            }, 100, function() {
                $(this).remove();
            });
            if (j > 22) {
                clearInterval(id);
                $('.pc-spans').empty(); // Remove all elements created on hover
            } else {
                j++;
            }
        }, 100);
    });

</script>

Также я заметил опечатку в анимации - в свойстве color вы написали olor, я исправил это в обновленном коде.

Comments

[Михаил Ливач]

ChatGPT или другая нейронка?

[HardBot]

Михаил Ливач, другая нейронка. По имени "мозги"

[Алан Гибизов]

HardBot, мозги так не работают. Слишком однообразно и занудно, так делают только боты.