All anchors within div fade except what's been clicked

Question

I have 3 buttons in the navbar, select, div, and text. When I click the select button I want all the other divs to animate at 60% opacity except select. When click it again I want no change specified unless I click an anchor and switch it for example.

It kind of works but it's poor coding, I tried doing this with radio buttons but was having trouble triggering it from a button click, and getting it to show properly in the navigation bar so I'm trying to apply a similar concept to the navbar with anchors instead of defying when an element is checked.

JQuery/JavaScript:

$('#tools a').click(function() {
    $('#tools a').animate({
        "opacity": "0.6"
    });

    $(this).animate({
        "opacity": "1"
    });
});

HTML:

<div class='header' data-role='header'>
    <div id='tools' align='center'>
        <a id='select' data-role='button' data-inline='true' data-mini='true'>Select</a>
        <a id='gen1' data-role='button' data-inline='true' data-mini='true'>Button</a>
        <a id='gen2' data-role='button' data-inline='true' data-mini='true'>Anchor</a>
    </div>

    <h1 style='visibility:hidden; width:0; height:0; margin:0;'>NULL</h1>
</div>

jQuery's not() is your huckleberry. – isherwood Oct 10 '13 at 17:46 — isherwood, Oct 10 '13 at 17:46

score 3 · Accepted Answer · answered Oct 10 '13 at 17:51

3

Simply add :not(this) before animate.

$('#tools a').click(function() {
    $('#tools a'):not(this).animate({
        "opacity": "0.6"
    });

    $(this).animate({
        "opacity": "1"
    });
});

answered Oct 10 '13 at 17:51

Daniel Imms

47,944
19
150
166

okay thats better than my approach – john Smith Oct 10 '13 at 17:55

score 0 · Answer 2 · answered Oct 10 '13 at 17:53

make use of a helper class

$('#tools a').click(function() {
  if($(this).hasClass('active')){
     $(this).removeClass('active');
  }else {
  $(this).addClass('active');
    $('#tools a').animate({
        "opacity": "0.6"
    });
  }
    $(this).animate({
        "opacity": "1"
    });
});

All anchors within div fade except what's been clicked

2 Answers2