別のボタンをクリックするとボタンがフェードアウトになります

Question

私はここで新しいのですが、あまりにも厳しく批判しないでください。私は2つのボタンを作成しました。私は1つをクリックすると、もう1つは灰色になります。私は天気予報アプリを作っています。ユーザーが華氏からCelciusに切り替えると、華氏のボタンは不透明になり、逆に切り替えると嫌いになります。どんな助けでも大歓迎です。ここに私のjQueryのはそれのためにある：

$(document).ready(function(){ 
    $('#Fahrenheit').click(function() { 
     $('#Celcius').fadeTo("fast", $('#celcius').css("opacity") == "1"?"0.5":"1"); 
     $('#Fahrenheit').fadeTo("fast", $('#Fahrenheit').css("opacity") == "1"?"1":"1"); 
    }); 
    $('#Celcius').click(function(){ 
     $('#Fahrenheit').fadeTo("fast", $('#Fahrenheit').css("opacity") == "1"?"0.5":"1"); 
     $('#Celcius').fadeTo("fast", $('#Celcius').css("opacity") == "1"?"1":"1"); 
    }); 
}); 

Answer 1

これは、あなたが必要なものを与えることがあります。

$(document).ready(function(){ 
    $('#Fahrenheit').click(function() { 
    $('#Celcius').animate({ opacity: 0.5 }, "fast"); 
    $('#Fahrenheit').animate({ opacity: 1 }, "fast"); 
    }); 

    $('#Celcius').click(function(){ 
    $('#Celcius').animate({ opacity: 1 }, "fast"); 
    $('#Fahrenheit').animate({ opacity: 0.5 }, "fast"); 
    }); 
}); 

Answer 2

あなたは、次の

<style> 
    .btn-weather{ 
     transition: opacity 0.5s; 
    } 
    .btn-faded{ 
     opacity: 0.5; 
    } 
</style> 
<button id="Farenheit" class="btn-weather">Farenheit</button> 
<button id="Celsius" class="btn-weather">Celsius</button> 
<script> 
    $(document).ready(function() { 
     $('#Farenheit').click(function() { 
      $(this).removeClass('btn-faded'); 
      $('#Celsius').addClass('btn-faded'); 
     }); 
     $('#Celsius').click(function() { 
      $(this).removeClass('btn-faded'); 
      $('#Farenheit').addClass('btn-faded'); 
     }); 
    }); 
</script>