Question

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

几乎可以工作但是有一个问题。

单击时，class =“number2 number3”也会变淡。

是否可以调用 - ＆gt;如果class包含的值为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);

});});

------------ EDIT -------------------

这会淡出特定的数字，但是当pressen按钮2时，doenst会恢复淡入。

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

这会排除来自class="number2 number3"的{{1}}的div，但.fadeTo()仍然适用于

修改

对于双按钮版本，按钮2执行此操作：

.fadeIn()

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

FadeTo＆amp; FadeIn不能正常工作。多班

2 个答案: