Databases
StackOverflow2013
Postsdbo
POChange the opacity of all elements except the one selected
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange the opacity of all elements except the one selected
    text
    copied!<p>I have three images on a single page and I would like to fade out the elements that aren't clicked on. The script works in the first instance so if you click on one picture, the other two fade. If you think click on an already faded picture, all that happens is that last non-faded picture also fades, instead of it being 100% opacity and the other two faded.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt; &lt;style&gt; .opac { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; border:thick; } &lt;/style&gt; &lt;script&gt; $(document).ready(function(){ $('a.images').click(function() { $(this).siblings().stop().animate({opacity: 0.4}, 300); $('a.images').click(function() { $not('this').stop().animate({opacity: 1.0}, 300); }); }); }); &lt;/script&gt; &lt;/head&gt; html &lt;body&gt; &lt;div id="images"&gt; &lt;a class="images" href="#"&gt;&lt;img class="click" src="../appalachia.jpg" height="133" /&gt;&lt;br/&gt;&lt;br/&gt;&lt;/a&gt; &lt;a class="images" href="#"&gt;&lt;img class="click" src="../appalachia.jpg" height="133" /&gt;&lt;br/&gt;&lt;br/&gt;&lt;/a&gt; &lt;a class="images" href="#"&gt;&lt;img class="click" src="../appalachia.jpg" height="133" /&gt;&lt;br/&gt;&lt;br/&gt;&lt;/a&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload