FadeTo & FadeIn 不能正常工作。多班答案

【问题标题】：FadeTo & FadeIn doesnt work as they should. multiple classFadeTo & FadeIn 不能正常工作。多班
【发布时间】：2012-11-02 23:54:54
【问题描述】：

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

几乎可以工作，但有 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>

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

【问题讨论】：

改变你的类名，我头疼。你可以在一年内感谢我！

标签： javascript jquery function opacity fadein

【解决方案1】：

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

这从.fadeTo() 中排除了带有class="number2 number3" 的div，但.fadeIn() 仍然适用于它

编辑

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

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

【讨论】：

谢谢。那讲得通。只有当我有 2 个按钮（1 个用于 number1 和 1 个用于 number2）时，它们才不会淡入...
我不是 100% 确定您的意思，.number3 在您有两个按钮时不会淡入吗？你可以发布更改后的代码吗？
我添加到答案中，如果您选择$('.number3').not('.number2')，您将一无所获，因为唯一具有类 number3 的元素也具有类 number2
知道了！不使用 FadeIn 但 fadeTo 工作。感谢您的帮助！

【解决方案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);
    });
});

【讨论】：