Question

单击按钮时，将显示隐藏的图像。我遇到的问题是我希望（现在）背景褪色或变黑，发生的事情是所有东西都褪色，包括显示的图像。

如何fadeOut只有背景？

<div id="chart" style="text-align: center;display:none;position:fixed;z-index:-100;">
    <img src="/donor-radar-chart?radar=%5B%5B%22W.Feather%22%2C0%2C26635692%2C240660%5D%2C%5B%22Jesterium%22%2C6%2C26297636%2C668476%5D%2C%5B%22OCFthanks%5BH%5D%22%2C6%2C19286508%2C8442507%5D%2C%5B%22wyluliraven%22%2C11%2C23246906%2C2486642%5D%2C%5B%22Quisarious%22%2C21%2C15048498%2C4027046%5D%2C%5B%22Breeze%22%2C22%2C23116432%2C1369416%5D%2C%5B%22Filter%22%2C40%2C27698092%2C54722%5D%2C%5B%22Axiomatic%22%2C70%2C16109511%2C1287889%5D%2C%5B%22DEJ915%22%2C80%2C21659570%2C677966%5D%2C%5B%22rIg0r_m0rTiS%22%2C84%2C29503180%2C1212%5D%2C%5B%22daggerhead%22%2C103%2C2553248%2C1880421%5D%5D"
        width="640" height="300" class="imgChart" alt="Donor Radar Chart"
        />
    </div>

<div style="background-color: #fafafa;">
    <table class="radar" id="radar" width="100%">
        <thead>
            <tr>
                <th colspan="2">Overtake</th>
                <th rowspan="3">Challenging Member</th>
                <th colspan="10">Challenging Member Stats
                    <span>
                        <input type="button" value="Chart" onclick="
                            var $body = $('body');
                            var $chart = $('#chart');
                            var left = Math.floor(($body.outerWidth() - 640) / 2);
                            var top = Math.floor(($body.outerHeight() - 300) / 2);
                            $body.fadeTo('fast', 0.5);
                            $chart
                                .css('left', left).css('top', top)
                                .css('z-index', '100').fadeTo('fast', 1);
                            $chart.on('click', function() {
                                $chart.fadeOut('fast');
                                $body.fadeTo('fast', 1);
                            });
                            "></span>
                    </th>
                </tr>

Answer 1

这很简单。最简单的方法：首先 - 扔掉

$body.fadeTo('fast', 0.5);

和

$body.fadeTo('fast', 1);

第二 - 向图表元素添加一些样式：

<div id="chart" style="text-align: center;display:none;position:fixed;z-index:-100; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top: 0px; left: 0px;">
<img src="/donor-radar-chart?radar=%5B%5B%22W.Feather%22%2C0%2C26635692%2C240660%5D%2C%5B%22Jesterium%22%2C6%2C26297636%2C668476%5D%2C%5B%22OCFthanks%5BH%5D%22%2C6%2C19286508%2C8442507%5D%2C%5B%22wyluliraven%22%2C11%2C23246906%2C2486642%5D%2C%5B%22Quisarious%22%2C21%2C15048498%2C4027046%5D%2C%5B%22Breeze%22%2C22%2C23116432%2C1369416%5D%2C%5B%22Filter%22%2C40%2C27698092%2C54722%5D%2C%5B%22Axiomatic%22%2C70%2C16109511%2C1287889%5D%2C%5B%22DEJ915%22%2C80%2C21659570%2C677966%5D%2C%5B%22rIg0r_m0rTiS%22%2C84%2C29503180%2C1212%5D%2C%5B%22daggerhead%22%2C103%2C2553248%2C1880421%5D%5D"
    width="640" height="300" class="imgChart" alt="Donor Radar Chart"
    />
</div>

现在，图表占据了所有屏幕的宽度和高度，并拥有自己的透明背景，涵盖了所有图表下方:)希望它会有所帮助。

Answer 2

您可以使用jQuery UI动画将背景颜色从一种颜色转换为另一种颜色：

$("#radarDiv").toggle(function() {
    $(this).animate({ backgroundColor: "white" }, 1000);
},function() {
    $(this).animate({ backgroundColor: "#fafafa" }, 500);
});

您可能还需要在桌面上专门设置背景颜色。

仅淡出背景

2 个答案: