javascript - FadeTo & FadeIn 不能正常工作。多班

Question

我希望在按下按钮时创建一个漂亮的淡入淡出效果。

几乎可以工作，但有 1 个问题。

单击时，class="number2 number3" 也会褪色。

是否可以调用 --> 如果类包含值 number3 而不是 fadeIN。

我有以下标记：

<div class="mouseclicks"><a href="#">test</a></div>
<div class="number1">tesx1</div>
<div class="number2">tesx2</div>
<div class="number2 number3">tesx3</div>

JS

$(function(){
$(".mouseclicks a").click(function(){
$('.number1').fadeTo("fast",0.1);
$('.number2').fadeTo("fast",0.1);
$('.number3').fadeIn("fast",1);

});});

- - - - - - 编辑 - - - - - - - - - -

这确实会淡出特定的数字，但不会在按下按钮 2 时恢复淡入。

$(function(){
$(".mouseclicks a").click(function(){
$('.number1').fadeTo("fast",0.1);
$('.number2').not('.number3').fadeTo("fast",0.1);
$('.number3').fadeIn("fast",1);
});});

$(function(){
$(".mouseclicks2 a").click(function(){
$('.number1').fadeTo("fast",0.1);
$('.number3').not('.number2').fadeTo("fast",0.1);
$('.number2').fadeIn("fast",1);
});});

Answer 1

$(document).ready(function() {
    $(".mouseclicks a").click(function() {
        $('.number1').fadeTo("fast",0.1);
        $('.number2').not('.number3').fadeTo("fast",0.1);
        $('.number3').fadeIn("fast",1);
    });
});

这不包括 div ，class="number2 number3"但.fadeTo()仍然.fadeIn()适用于它

编辑

对于 2 按钮版本，对按钮 2 执行以下操作：

$(".mouseclicks2 a").click(function() {
    $('.number1').fadeTo("fast",0.1);
    $('.number3').fadeTo("fast",0.1);
    $('.number2').not('.number3').fadeIn("fast",1);
});

Answer 2

给他们一个共同的父母，你可以让它更具未来感。

<div class="mouseclicks"><a href="#">test</a></div>
<div class="number-wrapper">
    <div class="number1">tesx1</div>
    <div class="number2">tesx2</div>
    <div class="number2 number3">tesx3</div>
</div>

-

$(document).ready(function(){
    $(".mouseclicks a").click(function(){
        $('.number3').fadeTo("fast",1).siblings().fadeTo("fast",0.1);
    });
});