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;
}

http://jsfiddle.net/ZAgnY/

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");
...

Please fill the form - I will response as fast as I can!