将淡出/淡入添加到火焰图像中

Question

我有4张图片（2个状态为红色（开）和灰色（关闭），3个是可点击的，中间的火焰不是。当1/2或3个外部图像是火焰时，火焰关闭如果是这样，火焰就会关闭，如果它们全部在火焰上，那么它就会被点燃。

我希望在改变状态/图像时为火焰添加淡入/淡出。

代码：Pastebin！

问候， 托马斯

<script type="text/javascript">
    $( document ).ready( function() {
        var $FlameCounter = 3;
        var FlameImg = document.getElementById('Flame');
        var self = this;

        function SetFlame(){
        if($FlameCounter ==3){

                $(FlameImg).attr('src', '../Images/_Flame.png');   
                }
                else{
                    $(FlameImg).attr('src', '../Images/_Flame2.png');  
                }
            }



        var $ClickToLe = $('.TopLeft').click(function () {
            var self = this;

            if ($(self).attr('src') == "../Images/_TopLeft.png") { // Rood
                $(self).attr('src', '../Images/_TopLeft2.png');


                $FlameCounter -=1;
            } else {
                $(self).attr('src', '../Images/_TopLeft.png'); // Rood
                $(FlameImg).attr('src', '../Images/_Flame.png');

                $FlameCounter +=1;
            }

                SetFlame();
        });



        var $ClickToRi = $('.TopRight').click(function () {
            var self = this;

            if ($(this).attr('src') == "../Images/_TopRight.png"){ //Grijs
                $(this).attr('src', '../Images/_TopRight2.png');


                $FlameCounter -=1;
            } else {
                $(this).attr('src', '../Images/_TopRight.png'); //Rood
                $(FlameImg).attr('src', '../Images/_Flame.png');

                $FlameCounter +=1;
            }
            SetFlame();
        });

        var $ClickToBot = $('.Bottom').click(function () {
            var self = this;

            if ($(this).attr('src') == "../Images/_Bottom.png"){
                $(this).attr('src', '../Images/_Bottom2.png');


                $FlameCounter -=1;
            } else {
                $(this).attr('src', '../Images/_Bottom.png');
                $(FlameImg).attr('src', '../Images/_Flame.png');

                $FlameCounter +=1;
            }
            SetFlame();
        });
    });