当用户在那里输入内容时,为输入字段事件设置动画占位符

我见过这样的演示.

但它是关于创建一个新元素.

parent().append("" + $input.attr('placeholder') + "");

有没有办法让占位符的动画消失input event而不添加新元素？

$("input[placeholder]").each(function () {
    
    var $input = $(this);
    // wrap the input with a label
    $input.wrap("");
    // append a span to the label
    $input.parent().append("" + $input.attr('placeholder') + "");
    // and finally remove the placeholder attribute
    $input.attr('placeholder', '');
    
}).keyup(function () {
    
    var $input = $(this);
    // toogle hidden class on span, according to whether there is content or not
    if ($input.val() === "") {
        $input.next("span").removeClass("hidden");
    } else {
        $input.next("span").addClass("hidden");
    }
});

label.placeholder {
    position: relative;
}

label.placeholder span {
    opacity: 1;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    transition: opacity 250ms;
    position: absolute;
    left: 5px;
    top: 2px;
    font-size: 12px;
    color: grey;
}

label.placeholder span.hidden {
    opacity: 0;
}

$('input[placeholder]').each(function () {
    $(this).wrap('').attr('placeholder', '');
}).on('keyup', function () {
    $(this).parent().toggleClass('hidden', this.value !== '');
});

label.placeholder {
    position: relative;
}
label.placeholder:after {
    content: attr(data-placeholder);
    position: absolute;
    top:0; right: 0;
    bottom: 0; left: 0;
    padding: 2px;
    font-size: 12px;
    color: grey;
    cursor: text;
    transition: opacity 250ms;
}
label.hidden.placeholder:after {
    opacity: 0;
}