Tuesday, February 15, 2022

JS, fadeTo function



in React Function(id, msg)

    showFadingMsg = (id, msg) => {
        let fadingTime = 1500;
        if (id == 'fadingFail') {
            fadingTime = 2500;
        }
        this.setState({ [id]: msg })
        $('#' + id).show().fadeTo(500, 1);
        // Now set a timeout to hide it
        window.setTimeout(function () {
            $("#" + id).fadeTo(500, 0).slideUp(500, function () {
                $(this).hide();
            });
        }, fadingTime);
    }

 Here fadingTime = 5000 is in millisecond.
fadeTo(500, 1): here 1 is opacity, 500
is in millisecond: ie, time to show from opacity from 0 to 1.

Call this function in React

 this.showFadingMsg('fadingFail', 'Application update failed.')
 

Reference:

https://api.jquery.com/fadeto/


No comments:

Post a Comment