Forums

sergeh

Hey guys,

I have a list that when you click on an <li> it will expand it and change it's opacity to 1 while changing all of it's siblings' opacity to 0.5

It works fine in Firefox but doesn't work in IE, when I click on an element it will change the opacity of the sibling right under it but that's about it and if I click on an another element it just won't work well...

here's what I have, I'm using jquery btw


$(\"#bd .questions-list li\").click(function(){
  $clicked = $(this);
  if($clicked.css(\"opacity\") != \"1\" && $clicked.is(\":not(animated)\"))
  {
	$clicked.animate({
		opacity: 1,
		borderWidth: 5
	}, 600 );
       $clicked.siblings().animate({
		opacity: 0.5,
		borderWidth: 1
	}, 600 );
  }
}

any ideas why this won't work in IE??

sergeh

ok so after posting this I found out that IE uses filter instead but using


filter: alpha(opacity=50)

doesn't help either, the opacity doesn't change even if I do something like


// in my css file
.half-opacity { opacity:0.5; filter: alpha(opacity=50); }

//in html
<li class=\"half-opacity\">
....
</li>

sergeh

ok so I think I'm on the right path

doing this works


if(($clicked.css(\"opacity\") != \"1\" || $clicked.css(\"filter\") != \"alpha:(opacity=100)\") && $clicked.is(\":not(animated)\"))
{
  $clicked.animate({
	opacity: 1,
	filter: 'alpha(opacity=100)',
	borderWidth: 5
  }, 600 );
}

even though it changes the opacity in IE it still throws in an error, now because IE is so wonderful at reporting errors, I have no clue what the error is... keeps saying something about line 928 char 5 invalid argument. Since line 928 or any surrounding lines don't have any js I'm guessing it's an error coming from jquery itself...

I hate IE :(

treehouse : what would you like to learn today?

Forums

opacity issues in IE [jquery]