CODEWITHSUNDEEP
jquery
Eric J
Eric J

Reputation: 1

jQuery hover opacity IE8

This is for a thumbnail - a simple opacity set then hover function.

What am I missing? This is working in most browsers (including IE7) but in IE8 I get nothing.

<script type="text/javascript">
    $(function() {
        // set opacity on page load
        $(".image-thumb").css("opacity", "0.6");
        // on mouse over
        $(".image-thumb").hover(
          function() {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, "slow");
          },
          // on mouse out
          function() {
            // animate opacity
            $(this).stop().animate({
                opacity: 0.6
            }, "slow");
          }
        );
    })
</script>

Upvotes: 0

Views: 1360

Answers (3)

Memonic
Memonic

Reputation: 345

http://www.w3schools.com/css/css_image_transparency.asp

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

Upvotes: 1

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

Use this :

$('.image-thumb').fadeTo('fast',.6);

Hope it helps.

Upvotes: 0

Hristo
Hristo

Reputation: 46517

It seems like you're doing this in a really hard way, at least compared to the way I would do it. Perhaps try this: http://jsfiddle.net/BAJPs/

    $('.image-thumb').bind('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
           $(this).stop().animate({
              opacity: 1
           }, "slow");          
        } else {
           $(this).stop().animate({
              opacity: 0.6
              }, "slow");           
        }
    });

UPDATE

I just checked my solution and what you have posted in IE8 and both work!

Upvotes: 1

Related Questions