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