April 21, 2012
Fade In CSS class
Question by Connor
I’m wondering how I can fade in a css class with jquery. The effect I’m looking for is sort of like what you see here: https://squareup.com/
What I’ve tried so far is this:
$(document).ready(function() {
$('.mini-nav li').hover(function () {
$('.hover').fadeIn(slow);
};
});
I thought about the .addClass() method, but I’m not sure where to add it (or if that is the best thing to do).
EDIT: Here is a fiddle of something I’ve tried: http://jsfiddle.net/J93NR/1/
Answer by Lie Ryan
you don’t need jquery for this, a pure CSS solution is much simpler (fiddle):
<div class="outer"><div class="inner"></div></div>
.outer {
background: url(...);
}
.inner {
background: url(...);
opacity: 1;
transition: opacity 0.3s;
}
.inner:hover {
opacity: 0;
}
Answer by Starx
If you are using jQuery UI, there is an option to animate using the class using switchclass()
Update:
$("element").addClass("classname").fadeIn("slow");
