Проводник и FADING IMAGES в OVERLAYING DIV'S проблема

Question

Почему не оверлейное изображение (в вложенном div) исчезает вместе с родительским div? Проблема только в EXPLORER ..

Смотрите «последние» на этикетки вещей портфельных: My website

переключатель категории находятся в навигации, чтобы увидеть, что «последние» метка не исчезает в Интернете-проводник

Это 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> 

Это 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 { 
} 

И это 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% 
    }); 
}); 

Пожалуйста, помогите! Я не могу понять это. PS: У меня мало опыта работы с jQuery/Javascript, поэтому, пожалуйста, объясните ясно. Спасибо!

- EDIT - И JQuery код категории Видеомикшер ниже:

$(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 - Код для навигации категории фильтра с '0,99' для «recentlabel "прозрачность:

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

Попробуйте сделать дубликаты ваших селекторов„.art“, которые относятся к„.art .recentlabel“и вызовите Selec резко исчезает.

Пример

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

Я хотел бы предложить жестко (+/-) этикетки скрытие, т.е .:

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); 
    } 

Хороший дизайн кстати.

EDIT:

Ваш код:

$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% 
    }); 
}); 

Отредактированный код (я установил максимальное альфа до 0,99, так что я не должен проверить браузер и глаза не будут видеть разницы) :

$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% 
    }); 
}); 

Попробуйте это, оно должно работать.