jquery fade in, fade out loop

Question 1

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?

Answer

Starx

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

Question 2

Question by Connor

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

Answer by Lie Ryan

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

Answer by Starx

Starx

If you are using jQuery UI, there is an option to animate using the class using switchclass()

Update:

$("element").addClass("classname").fadeIn("slow");

Tag: fadein

jquery fade in, fade out loop

Hcx’s Question:

Fade In CSS class

Question by Connor

Answer by Lie Ryan

Answer by Starx

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