Tag: fadeout
Nabin Nepal (Starx) fadein fadeout jquery loops
May 15, 2013

jquery fade in, fade out loop

Hcx’s Question:

hcxhcx

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?

StarxStarx

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

Nabin Nepal (Starx) background-image css fadeout javascript jquery
February 27, 2012

Fade out a background-image

Question by user1235147

user1235147user1235147

I have a simple image menu. There is a background-image which disappears on hover to show the menu items. I am looking for jQuery solution to fade out this image slowly. Any ideas?

HTML:

<div id="m1">
    <ul class="joomla-nav">
         <li>...</li>
    </ul>
</div>

CSS:

#m1 {
background-image:url('../images/m1.jpg');
width:320px;
height:210px; 
background-color:#1F91B7;
float:left;}

#m1:hover {
background-image:none;
background-color:transparent}

#m1:hover .joomla-nav {
display:block!important; }

#m1 .joomla-nav {
display:none!important; }

Many thanks!

Answer by Starx

StarxStarx

jQuery’s .animate() is only able to animate numeric Values.

Unlike background-color a background-image is not represented by numbers, so it cannot be animated.

What you can do is use another div with no background. And then fade the current div, so that it will look like the current background is fading out.

...

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