Results 1 to 4 of 4

Thread: css opacity

  1. #1
    Star Lounger
    Join Date
    Feb 2003
    Location
    near Blairgowrie, Perthshire, Scotland
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Possibly crying for the moon here, but I'd like to be able to use Javascript and css to gradually fade an image. IE and Mozilla handle opacity differently:

    style="opacity:0.4;filter:alpha(opacity=40)"

    The 'filter' option is IE. Using a timer and a for loop, I'd like to substitute the two values with variables and gradually fade them. Here's a code snippet that fails miserably in IE (without the timer and for loop):

    function fadeaway()
    {
    var element = document.getElementById('howdense');
    var density = 50;
    element.style.filter=alpha(opacity=density);

    }

    Any ideas, please?

  2. #2
    Star Lounger
    Join Date
    Feb 2003
    Location
    near Blairgowrie, Perthshire, Scotland
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shucks. Having to answer my own question! Got the syntax wrong - the last line should read:

    element.filters.alpha.opacity=density;

    Or depending on context you can use 'this' instead of element.

    Hope this helps some other coder out there...

  3. #3
    Plutonium Lounger
    Join Date
    Nov 2001
    Posts
    10,550
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Thanks for sharing, it's amazing how often a search turns up an old thread with just the solution someone is looking for!

  4. #4
    New Lounger
    Join Date
    Dec 2009
    Location
    Anchorage, Alaska
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When it comes to cross browser css compatibility I have always found using jQuey or some other javascript framework to be ideal.

    With jQuery it would just be a matter of

    $("#yourElementID").FadeIn(1000);
    $("#yourElementID").FadeOut(1000);
    etc...

    http://docs.jquery.com/Effects

    Or if you don't want to fade completely out...

    $("#yourElementID").animate({opacity:.5},1000);

    - Dom

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •