asked on

fade in/out divs problem - fade out not working

On a current project I am using jquery to fade out a div and than fade in a second one. The overall goal will be to rotate a number of divs containing articles from a CMS with a fade in/fade out effect.

However for some reason fadeOut is not working, only the FadeIn.

First i get all fading divs based on the classname and than I call the fadeengine function to start fading effects.
Its has got a sifr fix t0 as the initial 'display: none' does not let sifr work, so instead of making it initially 'display: none' i just make it appear 'left: -9999' which is changed to 0 by the javascript when i want the second div to be visible.

My code is as below.

Any help appreciated!

Cheers,

W1B

var total_divs=0; //do not change this. it will be calculated automatically
 
var className='fadingdivs'; //name of your class assigned to the divs you would like to rotate. Need to change it
 
$(document).ready(function(){
 
 
$("."+className).attr("id", function (arr) {
 
total_divs++;
 
return "fade" + (arr+1);
 
}
 
 
)
 
fadeEngine(0);
 
});
 
 
function fadeEngine(x) {
 
var y=x;
 
if(x==total_divs) y=1; else y++;
$("#fade"+x).fadeOut(2000);
//fix for displaying sifr into fading divs
$("#fade"+y).css("position","relative");
 
$("#fade"+y).css("left","0");
//sifr fix ends
 
$("#fade"+y).fadeIn(2000);
 
 
setTimeout('fadeEngine('+y+')',3000);
 
}

Open in new window

While1-Breathe

ASKER

This one got everyone stumped?

dwaynecharrington

For the fadeOut attribute, have you tried lowering the number from 2000 to see if it works, maybe something like 500? Let me know what happens.

hielo

>>This one got everyone stumped?
>>$("#fade"+y).css("position","relative");
Clearly you are "maneuvering" elements, BUT you did NOT post the HTML mark that should go along with your posted script. So anyone wanted to help you will need to guess what your markup is OR just ignore the question until you provide all the relevant information.

If your question goes ignored for a long period of time, chances are you did not ask the question clearly and/or did not post enough information.

No one should have to ask you for the missing information. You need to put your self in the shoes of those who you seek help from and realize that they are NOT familiar with your project and provide as much detail as possible.

KenCorbettJr

I think what you need to do is wait until the fadeOut completes before you fadeIn in the new div.

You do this by:

$("#fade"+x).fadeOut(2000, function() {
    //fix for displaying sifr into fading divs
    $("#fade"+y).css("position","relative");
 
    $("#fade"+y).css("left","0");
    //sifr fix ends
 
    $("#fade"+y).fadeIn(2000);
});

Open in new window

While1-Breathe

ASKER

I tried by lowering number 2000 from 500 and even slow for fadeOut attribute but it does not work

While1-Breathe

ASKER

Hi,

Sorry for the lack of detail previously, I'd hoped that the issue would be limited to the script so thought perhaps the html wasn't needed (thanks for letting me know it is!).

Below is an example of the divs being manipulated by the javascript.

The objective is that the first div should fade out completely and then the second div should fade in, but the fadeout doesn't seem to work at all.

@KenCorbettJnr

I tried your solution but i'm getting the same result (no fadeout).

Cheers,

W1B

   <div id="fadingcontainer">
            <div class="fadingdivs" style=""><div id="left_column" ><h1 >Lorem ipsum</h1>
                <div id="text">
                        <p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                </div>
				<div id="pagination">
                    	<ul> <li class="active"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li class="active"><a href="#">3</a></li> <li class="active"><a href="#">&laquo;</a></li> </ul>
                </div> <!--pagination ends--></div> <!--left column ends-->     
                <div id="main_column">
                  	<img src="test2.jpg"  />
                </div>
			</div> <!--fadding div 1 ends here-->
			<div class="fadingdivs" style="position:absolute; left:-9999px;"><div id="left_column" ><h1 >Lorem ipsum1</h1>
               	<div id="text">
                   	<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    </p>
                 </div>
				 <div id="pagination">
                    	<ul> <li class="active"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li class="active"><a href="#">3</a></li> <li class="active"><a href="#">&laquo;</a></li> </ul>
                 </div> <!--pagination ends-->
				 </div> <!--left column ends-->
                 <div id="main_column">
            	    <img src="test.jpg"  />
                 </div>
		    </div> <!--fadding div 2 ends here-->
		    <div class="fadingdivs" style="position:absolute; left:-9999px;"><div id="left_column" ><h1 >Lorem ipsum2</h1>
                    	<div id="text">
                        	<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
							</p>
                        </div>
						<div id="pagination">
                    	    <ul> <li class="active"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li class="active"><a href="#">3</a></li> <li class="active"><a href="#">&laquo;</a></li> </ul>
                        </div> <!--pagination ends-->
					    </div> <!--left column ends-->
                        <div id="main_column">
            	           <img src=""  />
             </div> <!--fadding div 3 end here-->
	</div> <!--faddingcontainer ends here-->

Open in new window

hielo

Initially, you are assigning the div ids dynamically. These ids start as follows:
<div id="fade1">...</div>
<div id="fade2">...</div>
<div id="fade3">...</div>
etc.

However, on line 19 you have:
fadeEngine(0);

So line 29 is essentially doing:
$("#fade0").fadeOut(2000);

But you have no <div id="div0">...</div>. So change line 19 to:
fadeEngine(1);

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

While1-Breathe

ASKER

Thank you for the completeness of your answer!

Just a note for anyone else reading /using the code above; we've run into another issue (outside the scope of this question) with using sIFR with 'display:none', so the example given above still contains issues.

Thanks to all who contributed!

W1B