Fade Out only only

Question

Когда я нажимаю кнопку, отображается скрытое изображение. Проблема заключается в том, что я хочу, чтобы (теперь) фон был поблекнут или почернев, и что происходит, так это то, что все исчезло, включая показанный образ.

show hidden image

Как 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 для перехода цвет фона от одного цвета к другому:

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

Вы, возможно, потребуется также специально установить цвет фона на столе.