May 15, 2013

jquery fade in, fade out loop

Hcx’s Question:

I want to create a loop like this,

anim = function () {
    $('.a1').fadeOut(function () {
        $('.b1').fadeIn(function () {
            $('.b1').delay(5000).fadeOut(function () {
                $('.a1').fadeIn(function () {
                    setTimeout(anim, 2000);

setTimeout(anim, 2000);

but after one loop .b1 is not fade in again so what could be the problem? or is there a better way to do this?

setTimeout() executes the function once, you are looking for setInterval()

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:

What I’ve tried so far is this:

$(document).ready(function() {
    $('.mini-nav li').hover(function () {

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:

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()



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