Explorer and FADING IMAGES IN OVERLAYING DIV'S problem

Question

Hello!

Why isn't the overlaying image (in nested div) fading along with the parent div? Problem only in EXPLORER..

See the 'recent' labels on the portfolio items: My website

Switch category's in the navigation to see that the 'recent' labels don't fade in Internet-Explorer

This is the html:

<div class="art recent">
   <div class="recentlabel"><img src="images/Recent-label.png" /></div>
    <a href="images/art/1.jpg" rel="lightbox" title=""> <img border="0" src="images/art/1tn.jpg" width="190" height="263" /></a><p>ARTIST<br />     artwork</p>
  </div>

This the css:

.art  {
   width: 190px;
   padding: 0px;
   margin: 5px;
   float: left;
   background:#2c313b;
   display: inline;
    -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
  border-radius: 5px;
}

.recentlabel {
 position:absolute;
 margin-top:-2px;
 margin-left:97px;
 width:95px;
 height:95px;
}

.recent {
}

And this is the jquery:

var $j = jQuery.noConflict();$j(document).ready(function(){    
    $j(".art").css({opacity: 0});   // Loaded at 0 opacity
    $j(".art").fadeTo(900, 0.8);    // Onload fade items to 80%

    $j(".art").hover(function(){
  if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 1.0); }  // Rollover at 100%
    },function(){
  if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 0.8); }  // Rollout at 80%
    });
});

Please help! I can't figure it out.. PS: I have little experience with jQuery/Javascript, so please explain clearly.. Thanks!

-- EDIT -- And the jquery category switcher code below:

$(document).ready(function() { 

    $('ul#navfilter a').click(function() {

        $(this).css('outline','none');
        $('ul#navfilter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','-');      

        if(filterVal == 'alles') {
            $('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden');

        } else {


            $('.wrap .masonryWrap > div').each(function() {                                
                if(!$(this).hasClass(filterVal)) {      
                    $(this).fadeTo('slow' ,0.08).addClass('hidden');

                } else {
                    $(this).fadeTo('slow' ,0.8).removeClass('hidden');
                }
            });
        }
        return false;
    });
});

-- Edit -- The code for the navigation category filter with '0.99' for the 'recentlabel' transparency:

if(filterVal == 'alles') {
            $('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden');
            $('.recentlabel').fadeTo(400, 0.99);

        } else {


            $('.wrap .masonryWrap > div').each(function() {                                
                if(!$(this).hasClass(filterVal)) {      

    $(this).fadeTo('slow' ,0.08).addClass('hidden');  

    if (filterVal!='recent') 
      $(this).find('.recentlabel').fadeTo(400, 0);
    } else {  
      $(this).fadeTo('slow' ,0.8).removeClass('hidden');  
      $(this).find('.recentlabel').fadeTo(400, 0.99);  
    }

Answer 1

Try making duplicates of your selectors ".art" that apply to ".art .recentlabel" and call the selectors to fade explicitly.

Example

var $j = jQuery.noConflict();$j(document).ready(function(){    
    $j(".art").css({opacity: 0});   // Loaded at 0 opacity
    $j(".art").fadeTo(900, 0.8);    // Onload fade items to 80%
    $j(".art .recentlabel").css({opacity: 0});   // Loaded at 0 opacity
    $j(".art .recentlabel").fadeTo(900, 0.8);    // Onload fade items to 80%

    $j(".art").hover(function(){
  if(!$j(this).hasClass("hidden")){
    $j(".art .recentlabel").fadeTo("fast", 1.0); }  // Rollover at 100%
    },function(){
  if(!$j(this).hasClass("hidden")){
    $j(".art .recentlabel").fadeTo("fast", 0.8); }  // Rollout at 80%
    });
});

Answer 2

I would suggest hardcode (+/-) label hiding, i.e.:

if(!$(this).hasClass(filterVal)) {      
    $(this).fadeTo('slow' ,0.08).addClass('hidden');  
    if (filterVal!='recent')  
      $(this).find('.recentlabel').fadeTo('slow', 0.08);
    } else {  
      $(this).fadeTo('slow' ,0.8).removeClass('hidden');  
      $(this).find('.recentlabel').fadeTo('slow', 0.8);  
    }  

Nice design btw.

EDIT:

Your code:

$j(".art").hover(function(){
  if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 1.0); }  // Rollover at 100%
    },function(){
  if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 0.8); }  // Rollout at 80%
    });
});

Edited code (I set maximum alpha to 0.99, so I don't have to check for browser and eyes won't see difference):

$j(".art").hover(function(){
  if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 0.99); }  // Rollover at [100%] - A.K.: 99%
    },function(){
  if(!$j(this).hasClass("hidden")){
    $j(this).fadeTo("fast", 0.8); }  // Rollout at 80%
    });
});

Try this, it should work.