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

Popular posts from this blog

unicode - Are email addresses allowed to contain non-alphanumeric characters? -

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -