Grow your CSS skills. Land your dream job.

jquery animate() opacity acting strange in IE.

  • # February 10, 2011 at 1:23 pm

    Hello there,

    View the example here

    They are the six boxes near the bottom of the page.

    $('#service_box div a span').hover(function() {
    $(this).stop().animate({
    opacity: 1,
    filter: 'alpha(opacity=100)'
    }, 300);
    }, function() {
    $(this).stop().animate({
    opacity: 0,
    filter: 'alpha(opacity=0)'
    }, 300);
    });

    If you view it in Firefox or Chrome, they are exactly how I want them to be.

    The problem is, if you open it with IE, the black thing with the “Learn More” button aren’t actually fading, just kind of appearing and disappearing. It’s hard to explain so if you can open it up it will be apparent to you.

    I don’t know why this is, anybody know a fix?

    Thanks

    # February 11, 2011 at 8:27 pm

    Bump, still unresolved.

    # February 12, 2011 at 6:25 am

    Remove filter: ‘alpha(opacity=0)’

    $('#service_box div a span').hover(function() {
    $(this).stop().animate({
    opacity: 1,
    }, 300);
    }, function() {
    $(this).stop().animate({
    opacity: 0
    }, 300);
    });
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".