jquery - Explorer and FADING IMAGES IN OVERLAYING DIV'S problem -
why isn't overlaying image (in nested div) fading along parent div? problem in explorer..
see 'recent' labels on portfolio items: my website
switch category's in navigation see 'recent' labels don't fade in internet-explorer
this 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 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 jquery:
var $j = jquery.noconflict();$j(document).ready(function(){         $j(".art").css({opacity: 0});   // loaded @ 0 opacity     $j(".art").fadeto(900, 0.8);    // onload fade items 80%      $j(".art").hover(function(){   if(!$j(this).hasclass("hidden")){     $j(this).fadeto("fast", 1.0); }  // rollover @ 100%     },function(){   if(!$j(this).hasclass("hidden")){     $j(this).fadeto("fast", 0.8); }  // rollout @ 80%     }); });   please help! can't figure out.. ps: have little experience jquery/javascript, please explain clearly.. thanks!
-- edit -- , 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 -- code navigation category filter '0.99' '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);       }      
try making duplicates of selectors ".art" apply ".art .recentlabel" , call selectors fade explicitly.
example
var $j = jquery.noconflict();$j(document).ready(function(){         $j(".art").css({opacity: 0});   // loaded @ 0 opacity     $j(".art").fadeto(900, 0.8);    // onload fade items 80%     $j(".art .recentlabel").css({opacity: 0});   // loaded @ 0 opacity     $j(".art .recentlabel").fadeto(900, 0.8);    // onload fade items 80%      $j(".art").hover(function(){   if(!$j(this).hasclass("hidden")){     $j(".art .recentlabel").fadeto("fast", 1.0); }  // rollover @ 100%     },function(){   if(!$j(this).hasclass("hidden")){     $j(".art .recentlabel").fadeto("fast", 0.8); }  // rollout @ 80%     }); });      
Comments
Post a Comment