I'm working on a website with jquery and thumbnails.
When the page is loaded all the thumbnails have to be on 60% of opacity. As soon as you go with your mouse over a thumb it needs to fade to 100%, if you move with your mouse out the thumbnail needs to fade back up on 60% of opacity.
When the user clicks on a thumbnail it has to stay at 100% of opacity. As soon as the user clickss on another thumbnail the 'old' thumbnail has to fade back to 60% and the 'new' one has to stay at 100%. (it already has 100% opacity because you go with your mouse over it).
This is the code I have so far:
$(window).bind("load", function () {
$("#mycarousel li").fadeTo(1, 0.6);
$("#mycarousel li").hover(function () {
$(this).fadeTo(350, 1.0);
$(this).addClass('Active');
}, function () {
$("this:not('.Active')").fadeTo(350, 0.6);
});
});
Any help would be appreciated.
Best Answer