fadeto jquery function on all page but few (tagged) elements

Question

I am using this simple script on a webpage:

<script>
$(document).ready(function(){
    $("notowned").fadeTo(2000,0.2,function(){
   });
});
</script>

so all elements (images) under the "notowned" tag are grayed out. However, it is quite counter-intuitive to programs pages like that, so i wanted to do the reverse: fade out all elements and then add "owned" tags to those who should not be grayed out. I tried various ways, like making two tags, but it did not work. Anyone can help me with that? Thanks!

EDIT: here is the jfiddle link http://jsfiddle.net/4tkH6/ note that i have over 118 elements, so I want them to be grayed out by default and then "ungrey" some of them with a tag or something. AFAIK fadetoggle removes them completely so it is not good for me.

Answer 1

Playground

<notowned> tag is not a standard tag neither in HTML5, so don't use it.

Use standard elements like <div> and if you need 'em special assign a custom data-* attribute for that purpose:

<div data-owned="0">image 1</div>
<div data-owned="1">image 2</div>
<div data-owned="0">image 3</div>
<div data-owned="0">image 4</div>
<div data-owned="0">image 5</div>

CSS example:

[data-owned='0']{ opacity: 0.3; }
[data-owned='1']{ opacity: 1  ; }

JS/jQ toggle data state example:

$('[data-owned]').click(function(){
  this.dataset.owned ^= 1; // Toggle 0/1
});