как удалить класс через 1 секунду в JavaScript или jQuery? - PullRequest
Новая
       1

как удалить класс через 1 секунду в JavaScript или jQuery?

3 голосов
/ 08 февраля 2020

как удалить класс через 1 секунду в JavaScript или jQuery?

Я пытаюсь сделать это так. Вы можете попробовать

1. HTML Пометьте 

<div class="chatBox">
    <ul>
        <li>
            <div class="chatInner">
                <div class="chat"><p>Hello How are you ?</p></div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
            <small><span class="active">a few seconds ago</span><span class="active">5 few seconds ago</span></small>
        </li>
        <li class="active">
            <div class="chatInner">
                <div class="chat"><p>Are you there ?</p></div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
            <small>a few seconds ago</small>
        </li>
        <li class="active1">
            <div class="chatInner">
                <div class="chat" style=" display: flex; justify-content: center;">
                    <div class="loading-dots" title="Loading…">
                        <div class="loading-dot loading-dot-1"></div>
                        <div class="loading-dot loading-dot-2"></div>
                        <div class="loading-dot loading-dot-3"></div>
                    </div>
                </div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
        </li>
    </ul>
</div>

Затем добавьте стиль, подобный этому

. css


.chatBox {
    background: #e9ecf5;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    padding: 30px 20px;
    margin-bottom: 30px;
} 

.chatBox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chatBox ul li + li {
    margin-top: 30px;
}

.chatBox ul li.active {
    display: none;
}

.chatBox ul li .chatInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}

.chatBox ul li.time {
    text-align: right;
}

.chatBox ul li:last-child {
    margin-bottom: 0;
}

.chatBox ul li small span {
    display: none;
}

.chatBox ul li small span + span {
    display: block;
}

.chatBox ul li small span.active {
    display: block;
}

.chatBox ul li small span.active + span {
    display: none;
}

.chatBox ul li .chat {
    width: 100%;
    background: -webkit-linear-gradient(45deg, #00f, #f15c26);
    background: -o-linear-gradient(45deg, #00f, #f15c26);
    background: linear-gradient(45deg, #00f, #f15c26);
    padding: 10px 15px;
    border-radius: 10px;
    margin-right: 20px;
    text-align: left;
    position: relative;
}

.chatBox ul li .chat:before {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-right: none;
    border-left: 10px solid #f15c26;
    right: -8px;
}

.chatBox ul li .chat p {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.chatBox ul li .img {
    padding-top: 10px;
}

.chatBox ul li .img img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid red;
    padding: 2px;
}

.inputn {
    margin-bottom: 20px;
}

.inputn input {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.chatBtn .btnChat {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 200px;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.loading-dots {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.loading-dot {
    -webkit-animation: d 1s infinite linear;
    animation: d 1s infinite linear;
    background-color: currentColor;
    border-radius: 50%;
    color: #7c98b6;
    height: 10px;
    width: 10px;
    color: #e66e50;
}

.loading-dot-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    margin-right: .75em;
}

.loading-dot-2 {
    -webkit-animation-delay: -.66s;
    animation-delay: -.66s;
    margin-right: .75em;
}

.loading-dot-3 {
    -webkit-animation-delay: -.33s;
    animation-delay: -.33s;
}

@keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

И, наконец, добавьте jQuery последний и этот код вроде этого 

    $(document).ready(function () {
        setTimeout(RemoveClass, 2500);
        setTimeout(addClass, 5000);

        function RemoveClass() {
            $('.active').removeClass("active");
        }
        function addClass() {
            $('.active1').addClass("active");
        }
    });

Вот прямая трансляция Демо 

    $(document).ready(function () {
        setTimeout(RemoveClass, 2500);
        setTimeout(addClass, 5000);

        function RemoveClass() {
            $('.active').removeClass("active");
        }
        function addClass() {
            $('.active1').addClass("active");
        }
    });
.chatBox {
    background: #e9ecf5;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    padding: 30px 20px;
    margin-bottom: 30px;
} 

.chatBox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chatBox ul li + li {
    margin-top: 30px;
}

.chatBox ul li.active {
    display: none;
}

.chatBox ul li .chatInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}

.chatBox ul li.time {
    text-align: right;
}

.chatBox ul li:last-child {
    margin-bottom: 0;
}

.chatBox ul li small span {
    display: none;
}

.chatBox ul li small span + span {
    display: block;
}

.chatBox ul li small span.active {
    display: block;
}

.chatBox ul li small span.active + span {
    display: none;
}

.chatBox ul li .chat {
    width: 100%;
    background: -webkit-linear-gradient(45deg, #00f, #f15c26);
    background: -o-linear-gradient(45deg, #00f, #f15c26);
    background: linear-gradient(45deg, #00f, #f15c26);
    padding: 10px 15px;
    border-radius: 10px;
    margin-right: 20px;
    text-align: left;
    position: relative;
}

.chatBox ul li .chat:before {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-right: none;
    border-left: 10px solid #f15c26;
    right: -8px;
}

.chatBox ul li .chat p {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.chatBox ul li .img {
    padding-top: 10px;
}

.chatBox ul li .img img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid red;
    padding: 2px;
}

.inputn {
    margin-bottom: 20px;
}

.inputn input {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.chatBtn .btnChat {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 200px;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.loading-dots {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.loading-dot {
    -webkit-animation: d 1s infinite linear;
    animation: d 1s infinite linear;
    background-color: currentColor;
    border-radius: 50%;
    color: #7c98b6;
    height: 10px;
    width: 10px;
    color: #e66e50;
}

.loading-dot-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    margin-right: .75em;
}

.loading-dot-2 {
    -webkit-animation-delay: -.66s;
    animation-delay: -.66s;
    margin-right: .75em;
}

.loading-dot-3 {
    -webkit-animation-delay: -.33s;
    animation-delay: -.33s;
}

@keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chatBox">
    <ul>
        <li>
            <div class="chatInner">
                <div class="chat"><p>Hello How are you ?</p></div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
            <small><span class="active">a few seconds ago</span><span class="active">5 few seconds ago</span></small>
        </li>
        <li class="active">
            <div class="chatInner">
                <div class="chat"><p>Are you there ?</p></div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
            <small>a few seconds ago</small>
        </li>
        <li class="active1">
            <div class="chatInner">
                <div class="chat" style=" display: flex; justify-content: center;">
                    <div class="loading-dots" title="Loading…">
                        <div class="loading-dot loading-dot-1"></div>
                        <div class="loading-dot loading-dot-2"></div>
                        <div class="loading-dot loading-dot-3"></div>
                    </div>
                </div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
        </li>
    </ul>
</div>

Примечание: пожалуйста, сообщите мне, если у вас есть лучшее решение.

1 Ответ

1 голос
/ 03 марта 2020 

    $(document).ready(function () {
      
      
       setTimeout(function(){ 
                              $('.active1').addClass("active");
       }, 2000); 

      setTimeout(function(){ 
        $('.active').removeClass("active");
      }, 1000); 
        
      
//         setTimeout(RemoveClass, 2500);
//         setTimeout(addClass, 5000);

//         function RemoveClass() {
//             $('.active').removeClass("active");
//         }
//         function addClass() {
//             $('.active1').addClass("active");
//         }
    });
.chatBox {
    background: #e9ecf5;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    padding: 30px 20px;
    margin-bottom: 30px;
} 

.chatBox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chatBox ul li + li {
    margin-top: 30px;
}

.chatBox ul li.active {
    display: none;
}

.chatBox ul li .chatInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}

.chatBox ul li.time {
    text-align: right;
}

.chatBox ul li:last-child {
    margin-bottom: 0;
}

.chatBox ul li small span {
    display: none;
}

.chatBox ul li small span + span {
    display: block;
}

.chatBox ul li small span.active {
    display: block;
}

.chatBox ul li small span.active + span {
    display: none;
}

.chatBox ul li .chat {
    width: 100%;
    background: -webkit-linear-gradient(45deg, #00f, #f15c26);
    background: -o-linear-gradient(45deg, #00f, #f15c26);
    background: linear-gradient(45deg, #00f, #f15c26);
    padding: 10px 15px;
    border-radius: 10px;
    margin-right: 20px;
    text-align: left;
    position: relative;
}

.chatBox ul li .chat:before {
    position: absolute;
    content: "";
    border: 10px solid transparent;
    border-right: none;
    border-left: 10px solid #f15c26;
    right: -8px;
}

.chatBox ul li .chat p {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.chatBox ul li .img {
    padding-top: 10px;
}

.chatBox ul li .img img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid red;
    padding: 2px;
}

.inputn {
    margin-bottom: 20px;
}

.inputn input {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.chatBtn .btnChat {
    border: none;
    border-radius: 10px;
    background: #fff;
    height: 50px;
    width: 200px;
    font-size: 16px;
    text-align: center;
    outline: none;
}

.loading-dots {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.loading-dot {
    -webkit-animation: d 1s infinite linear;
    animation: d 1s infinite linear;
    background-color: currentColor;
    border-radius: 50%;
    color: #7c98b6;
    height: 10px;
    width: 10px;
    color: #e66e50;
}

.loading-dot-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    margin-right: .75em;
}

.loading-dot-2 {
    -webkit-animation-delay: -.66s;
    animation-delay: -.66s;
    margin-right: .75em;
}

.loading-dot-3 {
    -webkit-animation-delay: -.33s;
    animation-delay: -.33s;
}

@keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes d {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(0.25em);
        transform: translateY(0.25em);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        background-color: #cbd6e2;
        -webkit-transform: translateY(-0.25em);
        transform: translateY(-0.25em);
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chatBox">
    <ul>
        <li>
            <div class="chatInner">
                <div class="chat"><p>Hello How are you ?</p></div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
            <small><span class="active">a few seconds ago</span><span class="active">5 few seconds ago</span></small>
        </li>
        <li class="active">
            <div class="chatInner">
                <div class="chat"><p>Are you there ?</p></div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
            <small>a few seconds ago</small>
        </li>
        <li class="active1">
            <div class="chatInner">
                <div class="chat" style=" display: flex; justify-content: center;">
                    <div class="loading-dots" title="Loading…">
                        <div class="loading-dot loading-dot-1"></div>
                        <div class="loading-dot loading-dot-2"></div>
                        <div class="loading-dot loading-dot-3"></div>
                    </div>
                </div>
                <div class="img"><img src="https://image.flaticon.com/icons/svg/1864/1864593.svg" alt="img"></div>
            </div>
        </li>
    </ul>
</div>

Вы можете внести незначительные изменения в файл js! Потому что в jquery уже есть функция добавления удаления, поэтому вам не нужно делать это один раз

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...