Grow your CSS skills. Land your dream job.

opacity issues in IE [jquery]

  • # November 16, 2008 at 2:17 pm

    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

    Code:
    $(“#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??

    # November 16, 2008 at 2:29 pm

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

    Code:
    filter: alpha(opacity=50)

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

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

    //in html

  • ….
# November 16, 2008 at 4:26 pm

ok so I think I’m on the right path

doing this works

Code:
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 :(

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".