Home » Javascript » using opacity as a fade effect

using opacity as a fade effect

Posted by: admin November 1, 2017 Leave a comment

Questions:

How do I make the easein to have fade effect using opacity? The easeout works just fine but cant seem to have the same effect on easein.

Anyway to fix this or some alternatives that might work? Btw just starting up and using old codes for trial and error.

Badly need help on this, so I can move on and try different one.

        function updateBoard() {
            play();
            if ($('#mTextLT21').html() != mTextLT21) {
                animating = true;
                $('#mTextLT21').tween({
                    fadeTo: {
                      start: 0,
                      time: 1,
                      stop: 100,
                      duration: 0.5,
                      effect: 'easeIn'
                    },
                    onStop: function(){
                        $('#mTextLT21').html(mTextLT21);
                    }
                });

                $('#mTextLT21').tween({
                    opacity: {
                      start: 100,
                      time: 3,
                      stop: 0,
                      duration: 0.5,
                      effect: 'easeOut'
                    },
                    onStop: function(){
                        animating = false;
                    }
                });
            }


            if ($('#mTextLT22').html() != mTextLT22) {
                animating = true;
                $('#mTextLT22').tween({
                    opacity: {
                      start: 50,
                      stop: 100,
                      time: 1,
                      duration: 0.5,
                      effect: 'easeIn'
                    },
                    onStop: function(){
                        $('#mTextLT22').html(mTextLT22);
                    }
                });

                $('#mTextLT22').tween({
                    opacity: {
                      start: 100,
                      time: 3,
                      stop: 0,
                      duration: 0.5,
                      effect: 'easeOut'
                    },
                    onStop: function(){
                        animating = false;
                    }
                });
            }

            $.play();
            doUpdate = false;
        }
Answers: