Question

我是新来的，所以不要过于严厉地判断大声笑。我已经创建了两个按钮，我想将它设置为当我点击一个按钮时，另一个按钮变为灰色。我正在制作天气应用程序，当用户从华氏度切换到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>

单击另一个按钮时，按钮会淡出

2 个答案: