Jquery fadeout和fadein只有一次

Question

我在下面淡出和淡化用户名输入。

<p>
    <input type="text"> <span id="xxspan1" style="display: none">Username</span>
</p>


<script>
    $("input").focus(function () {
        $(this).next('#xxspan1').css("display", "inline").fadeOut(1000);
        $(this).next('#xxspan1').fadeIn(2000);


    });
</script>

我不想第二次在焦点上淡出和淡出。我只想要一次（第一次）淡出和淡化。

这样做的最佳方式是什么？

Answer 1

为此目的使用One()。它会将事件附加到只执行一次的元素。

$("input").one("focus",function () {
        $(this).next('#xxspan1').css("display", "inline").fadeOut(1000);
        $(this).next('#xxspan1').fadeIn(2000);


    });

Demo

Answer 2

试试这个，

$("input").on("focus",function (event) {
    $(this).next('#xxspan1').css("display", "inline").fadeOut(1000);
    $(this).next('#xxspan1').fadeIn(2000);
    $( this ).off( event );
});