Menu ▼

Previous Next

JQuery FadeIn and FadeOut:

JQuery have inbuild funcitons fadeIn(),fadeOut() to fade in or fade out the controls. these funcitons will take the parameters 'slow','fast' or timespan in milliseconds.Based on the parameter animation will be performed if did not passed any paramter default animation will be 'slow'.


Default Fade in / Fade out (slow)

This div can be fadein or fadeout by using JQuery, Click the button below to fade in or fade out now.

<script language="javascript">

    function fadeinorout(btn) {

        if ($(btn).val() == "Fade In") {

            $(btn).val("Fade Out")

            $("#divFadeInOut").fadeIn();

        }

        else {

            $(btn).val("Fade In")

            $("#divFadeInOut").fadeOut();

        }

    }

</script>

 


Fade in / Fade out in fast motion

This div can be fadein or fadeout by using JQuery, Click the button below to fade in or fade out now.

<script language="javascript">

    function fadeinoroutslow(btn) {

        if ($(btn).val() == "Fade In") {

            $(btn).val("Fade Out")

            $("#divFadeInOutSlow").fadeIn('fast');

        }

        else {

            $(btn).val("Fade In")

            $("#divFadeInOutSlow").fadeOut('fast');

        }

    }

</script>

 


Fade in / Fade out using time span

This div can be fadein or fadeout by using JQuery, Click the button below to fade in or fade out now.

<script language="javascript">

    function fadeinoroutTimespan(btn) {

        if ($(btn).val() == "Fade In") {

            $(btn).val("Fade Out")

            $("#divFadeInOutTimespan").fadeIn(3000);

        }

        else {

            $(btn).val("Fade In")

            $("#divFadeInOutTimespan").fadeOut(3000);

        }

    }

</script>

 

Previous Next




Search dotnetlearners.com