CODEWITHSUNDEEP
jqueryhtml
user3705822
user3705822

Reputation: 493

Jquery fadeout and fadein only once

I fadeout and fadein username input below.

<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>

i dont want to fadein and fadeout on focus second time.I only want fadeout and fadein only once(first) time.

What is the best way to do this ?

Upvotes: 1

Views: 965

Answers (2)

hari
hari

Reputation: 1963

try this,

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

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Use One() for this purpose. It will attach the event to an element which will execute only once.

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


    });

Demo

Upvotes: 1

Related Questions