Копировать в буфер обмена с исчезающим сообщением

Question

Я хочу добавить функцию в функцию копирования в буфер обмена, чтобы она отображала «скопировано!» сообщение, когда пользователь щелкает, с исчезающим эффектом и исчезает через 5 секунд. Я построил следующий код, он работает, пока не исчезнет вся коробка! Я не понимаю, что я делаю здесь не так.

    $(".copyto-clipboard .copyto-clipboard-text").click(function(event){
        var $tempElement = $("<input>");
        $("body").append($tempElement);
        $tempElement.val($(this).closest(".copyto-clipboard").find("span").text()).select();
        document.execCommand("Copy");
        $tempElement.remove();
        $('.copyto-clipboard').append('<span class="copied">copied!</span>').fadeIn(100).fadeOut(500);
    });

Answer 1

Потому что вы затухаете весь div, а не промежуток, который вы только что добавили. Во-вторых, исчезновение (500) - это не 5 секунд. Число указывается в миллисекундах, поэтому 5000 - это 5 секунд.

Измените свой код следующим образом, чтобы применить постепенное увеличение и уменьшение значения для вновь созданного диапазона:

var $copiedElement = $("<span>");
$copiedElement.addClass('copied').text('copied!');
$('.copyto-clipboard').append($copiedElement);
$copiedElement.fadeIn(100);
$copiedElement.fadeOut(5000);