Changing elements opacity using jQuery

Question

I need to change the opacity of all buttons after clicking one (except the button that was clicked).

Here is HTML code:

<button data-target="Section1" class="metro-button">Button1</button>
<button data-target="Section2" class="metro-button">Button2</button>
<button data-target="Section3" class="metro-button">Button3</button>

And jQuery code:

$(".metro-button").click(function(){
    var buttons = document.getElementsByClassName("metro-button");
    for(i = 0 ; i < buttons.length ; i++) {
      if ($(this).attr('data-target') != buttons[i].attr('data-target')) {
            buttons[i].animate({"opacity" : 0.3});
       }
    }
});

Demo in JsFiddle.

What is the problem ?

Any ideas would be appreciated.

Answer 1

Could be a solution too, depending of your HTML structure:

DEMO

$(".metro-button").click(function () {
    $(this).animate({
        "opacity": 1
    }).siblings('.metro-button').animate({
        "opacity": .3
    })
});

Answer 2

Stick with jQuery

$(".metro-button").click(function(){
    $(".metro-button").not(this).animate({"opacity" : 0.3});
    $(this).animate({"opacity" : 1});
});

FIDDLE