Why isn't the overlaying image (in nested div) fading along with the parent div? Problem only in EXPLORER..
See the 'recent' labels on the portfolio items: My website
Switch category's in the navigation to see that the 'recent' labels don't fade in Internet-Explorer
This is the 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 the 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 this is the 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%
});
});
Please help! I can't figure it out.. PS: I have little experience with jQuery/Javascript, so please explain clearly.. Thanks!
-- EDIT -- And the 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');
开发者_如何学Python 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 -- The code for the navigation category filter with '0.99' for the '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 your selectors ".art" that apply to ".art .recentlabel" and call the selectors to fade explicitly.
Example
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%
});
});
I would suggest hardcode (+/-) label hiding, i.e.:
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);
}
Nice design btw.
EDIT:
Your code:
$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%
});
});
Edited code (I set maximum alpha to 0.99, so I don't have to check for browser and eyes won't see difference):
$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%
});
});
Try this, it should work.
精彩评论