Hey guys, hopefully someone can point me in the right direction on this…
http://joshwhitedesign.com/testcenter/markinsley/
I’m looking at creating a gallery that has images at .5 opacity, and when hovered over, they come to an opacity of 1. So I have a gallery.js file that has this code in it:
Code:
$(document).ready(function(){
$(‘.gallery img’).hover(function() {
$(this).stop().animate({“opacity” : 1},200).addClass(‘boxshadow’);
}, function() {
$(this).stop().animate({“opacity” : .5, “border” : “0px” },200).removeClass(‘boxshadow’);
});
});
However, I’ve also got a fading in menu that alternates between images. The basic code is this:
Code:
$(document).ready(function(){
$(‘.home’).hover(function() {
$(this).stop().animate({ “opacity” : 0 },1000);
}, function() {
$(this).stop().animate({ “opacity” : 1 },1000);
});
});
The problem is that the menu.js code seems to be crossing with the gallery.js somehow. If you hover over the images on that url, they fade in, but then they fade completely away. If I take out the menu.js from the header, the gallery.js works just fine as intended.
I’m not seeing where they are conflicting. Does anyone see where that’s happening and I’m just missing it?
Just in case anyone had the same issue, I had to define the .gallery as a #gallery instead, and the issue was resolved.
