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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src=".5.2/jquery.min.js"></script>
<style>
.opac {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
border:thick;
}
</style>
<script>
$(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);
});
});
});
</script>
</head>
html
<body>
<div id="images">
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
</div>
</body>
</html>
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.opac {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
border:thick;
}
</style>
<script>
$(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);
});
});
});
</script>
</head>
html
<body>
<div id="images">
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
</div>
</body>
</html>
-
1
You don't need
-khtml-*rules anymore, they've bee obsolete. Moreover, don't forget to setzoom: 1to triggerhasLayoutin IE <= 7, otherwise thefilterwill not be applied. – Marcel Korpel Commented Apr 6, 2011 at 15:14 -
@Marcel: Do you need
-webkit-*rules? – gen_Eric Commented Apr 6, 2011 at 15:14 -
2
@Rocket: according to MDC, plain
opacityis supported by all current WebKit-based browsers, so: no, you also don't need those. BTW, the same is true for-moz-opacity. – Marcel Korpel Commented Apr 6, 2011 at 15:18
2 Answers
Reset to default 5You are attaching a click handler inside a click handler. Every time you click, a new click handler will be added and called on each subsequent click.
Click handlers are called with the newest added called first, which means that last, all the images are set to transparent.
If you want the picture you clicked on to be opaque, and the others transparent, try this:
$('a.images').click(function(){
// Make all images (except this) transparent
$('a.images').not(this).stop().animate({opacity: 0.4}, 300);
// Make this opaque
$(this).stop().animate({opacity: 1.0}, 300);
});
Demo: http://jsfiddle/gCsRL/1/
In this code:
$('a.images').click(function() {
$(this).siblings().stop().animate({opacity: 0.4}, 300);
$('a.images').click(function() {
$not('this').stop().animate({opacity: 1.0}, 300);
});
});
you're registering a click handler over and over, for each click. Just try this instead:
$('a.images').click(function() {
$(this).siblings().stop().animate({opacity: 0.4}, 300);
$(this).stop().animate({opacity: 1.0}, 300);
});