Javascript 单击另一个按钮时使按钮淡出

我是新来的，所以不要太苛刻地评判lol。我已经创建了两个按钮，我想让它在我点击一个按钮时，另一个按钮会变成灰色。我正在制作一个天气应用程序，当用户从华氏温度切换到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");
    });
});

---

这可能会满足您的需求：

$(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");
  });
});

---

你可以试试下面的方法

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

.btn天气{
过渡：不透明度0.5s；
}
.btn已褪色{
不透明度：0.5；
}
华氏
摄氏度
$（文档）.ready（函数（）{
$（“#Farenheit”）。单击（函数（）{
$（this.removeClass（'btn-failed'）；
$（“#摄氏度”）.addClass（'btn-褪色'）；
});
$（'#摄氏度'）。单击（函数（）{
$（this.removeClass（'btn-failed'）；
$（“#Farenheit”）.addClass（'btn-flashed'）；
});
});

您的HTML是什么样子的？