Исследователь и ФАЙДИНГ ИЗОБРАЖЕНИЙ В ЗАВЕРШЕНИИ ПРОБЛЕМЫ DIV

Question

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

Посмотрите "последние" ярлыки на элементах портфолио: Мой сайт

Переключите категории в навигации, чтобы увидеть, что "последние" ярлыки не исчезают в Internet-Explorer

Это 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, поэтому, пожалуйста, объясните четко.. Спасибо!

- РЕДАКТИРОВАТЬ - И код переключателя категории 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;
    });
});

- Редактировать - код фильтра категории навигации с "0,99" для прозрачности "latestlabel":

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

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

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

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

РЕДАКТИРОВАТЬ:

Ваш код:

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

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

Answer 2

Попробуйте создать дубликаты ваших селекторов ".art", которые применяются к ".art .recentlabel", и вызовите селекторы для явного замирания.

пример

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