Fondu en fond seulement

Question

Lorsque je clique sur le bouton, l'image cachée est affichée. Le problème que j'ai est que je veux que le fond (maintenant) soit fané ou noirci et ce qui se passe est que tout est fané y compris l'image montrée.

show hidden image

Comment fadeOut que l'arrière-plan?

<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

C'est simple. La façon la plus simple: Première - jeter

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

et

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

Deuxièmement - ajouter des styles à l'élément diagramme

<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> 

Maintenant, tableau prend toutes la largeur de l'écran et la hauteur et a son propre fond transparent qui couvre tous sous le tableau :) J'espère que cela aidera.

Answer 2

Vous pouvez utiliser le Animer UI jQuery pour passer la couleur de fond d'une couleur à l'autre:

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

Vous devrez peut-être également définir spécifiquement la couleur d'arrière-plan sur la table.