Question

I wish to create a nice fade effect when pressed a button.

Almost working but theres 1 problem.

When clicked the class=”number2 number3″ also gets faded.

Is it possible to call –> if class contains value number3 than fadeIN.

I’ve got the following markup:

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

This does fade out the particular number, but doenst get back faded in when pressen button 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);
    });
});

This excludes the div with class="number2 number3" from the .fadeTo() but the .fadeIn() still applies to it

EDIT

For the 2-button version, do it like this for button 2:

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